/* mia-ui.css — MiaIncentive tasarim katmani (Erp_Loyalty PILOT surumu, 2026-09-18)
*
* Kaynak: Erp_Sadakat/MusteriSadakat/assets/stylesheets/mia-ui.css
* Iki proje AYNI temayi kullaniyor (theme.css ve custom.css birebir ayni dosya),
* bu yuzden katman oldugu gibi tasinabiliyor. Ama bu kopya BIREBIR DEGILDIR;
* asagidaki bloklar PILOT icin BILEREK ALINMADI:
*
* - KABUK blogu (.app-header / #stacked-menu / .app-aside renkleri)
* -> ust bar ve sol menuyu TUM ekranlarda degistirirdi. Pilot iki sayfa.
* - ALT BAR blogu (--footer-h / .app-footer)
* -> Erp_Loyalty _LayoutAdmin'de footer YOK; kural icerik kutusunu bosuna kisaltirdi.
* - MODAL global blogu (.modal-content / .modal-body .form-control ...)
* -> ".mia" kapsami disinda oldugu icin 108 view'in modallarini birden degistirirdi.
* - Global font blogu (html,body{font-family:...}) ve html,body{overflow:hidden}
* -> gecirilmemis sayfalarin tipografisini ve kaydirma duzenini bozardi.
* Font burada ".mia" kapsamina alindi; "Fira Sans" zaten yerelden yukleniyor
* (assets/fonts/fira-sans.css, _LayoutAdmin satir 28) - CDN'e gerek yok.
*
* Bunlarin hepsi ekosistem geneline gecis karari verilirse AYRI bir fazda ele alinir.
*
* YUKLEME SIRASI: bu dosya Bootstrap'tan SONRA, corporate-filter.css'ten ONCE
* yuklenir. Sebep: ".cfb .form-control" ile ".mia .form-control" ayni ozgullukte
* (0,2,0); esitlikte SON yuklenen kazanir. cfb filtre seridi kendi alaninda son
* sozu soylemeye devam etsin diye sirayi bozma.
*
* Bolumler: 1) Token 2) Tabla 3) Buton/Form 4) Tablo 5) Rozet/Durum
* 6) Filtre 7) Bos durum 8) Form sayfasi 9) Tema uyumu 10) DataTables
*/
/* --- 1) TOKEN (global - yalniz CSS degiskeni, hicbir sey boyamaz) --- */
:root{
--brand:#3063A0; --brand-2:#24507F; --brand-3:#7FA3CC; --brand-soft:#EAF1F9;
--paper:#FFFFFF; --canvas:#F4F7FA; --sunk:#EDF2F7;
--ink:#111C2B; --ink-2:#41526A; --ink-3:#67798F; --ink-4:#93A2B5;
--line:#E1E8F0; --line-2:#CBD6E2;
--ok:#146A4B; --ok-soft:#E3F1EA;
--warn:#8A5A08; --warn-soft:#FBF0DA;
--crit:#A32A20; --crit-soft:#FAE9E6;
--info:#1A5C8A; --info-soft:#E6F1F8;
--sh-1:0 1px 2px rgba(17,28,43,.05);
--sh-2:0 4px 12px rgba(17,28,43,.08), 0 12px 28px rgba(17,28,43,.06);
--h:34px;
--r:8px;
--t:150ms cubic-bezier(.2,.65,.2,1);
}
/* --- 2) TABLA --- */
.mia{
background:var(--canvas); color:var(--ink);
font-family:"Fira Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
-webkit-font-smoothing:antialiased;
font-size:14px; line-height:1.45;
}
.mia *{box-sizing:border-box}
.mia h1,.mia h2,.mia h3{margin:0; font-weight:600}
.mia button,.mia input,.mia select,.mia textarea{font-family:inherit}
.mia :focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:6px}
.mia .mono{font-family:"Consolas","DejaVu Sans Mono",monospace; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
/* Sayfa basligi (yeni yazilan ekranlar icin; mevcut ekranlar .message-header kullanir) */
.mia .ph{background:var(--canvas); padding:16px 20px 12px; border-bottom:1px solid var(--line)}
.mia .ph-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mia .ph h1{font-size:19px;letter-spacing:-.02em}
.mia .ph .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.mia .pbody{padding:16px 20px 40px; flex:1; min-width:0}
/* Layout uyumu: _LayoutAdmin .page-inner-fill'e sabit yukseklik + overflow:hidden
veriyor (satir 98-104, !important). .mia-fill o kutunun ICINDE dikey akisi kurar:
baslik sabit kalir, kaydirma icerik kutusundadir. Ekranda TEK dikey cubuk olur. */
.mia.mia-fill{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.mia.mia-fill > .ph{flex:none}
.mia.mia-fill > .pbody{flex:1;min-height:0;overflow-y:auto;overflow-x:auto}
/* Program ekranlari tema kapsayicilarini kullaniyor: */
.mia.mia-fill > .message-header{flex:none}
.mia.mia-fill > .message-body{flex:1;min-height:0;overflow-y:auto;overflow-x:auto}
/* Tema .page{min-height:646px} veriyor; page-inner-fill sabit yukseklikte oldugu icin
bu, kisa ekranlarda disarida fazladan bir kaydirma cubugu uretir. */
.mia-page{min-height:0}
/* --- 3) BUTON / FORM --- */
.mia .btn{height:var(--h);padding:0 12px;border-radius:var(--r);cursor:pointer;font-size:12.5px;font-weight:500;
border:1px solid var(--line-2);background:var(--paper);color:var(--ink);white-space:nowrap;
display:inline-flex;align-items:center;gap:7px;transition:border-color var(--t),color var(--t),background var(--t)}
.mia .btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.mia .btn:disabled,.mia .btn.disabled{opacity:.5;cursor:not-allowed}
.mia .btn.sm,.mia .btn-sm{height:28px;padding:0 10px;font-size:12px}
.mia .fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.mia .fld label{font-size:12px;font-weight:500;color:var(--ink-2);margin-bottom:0}
.mia .fld .hint{font-size:11.5px;color:var(--ink-4)}
/* --- 4) TABLO --- */
.mia .panel{background:var(--paper);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh-1);overflow:hidden;overflow:clip}
.mia table{border-collapse:separate;border-spacing:0;width:100%;margin-bottom:0;color:var(--ink);
min-width:760px;min-width:min(760px,100%)}
/* BASLIK SARMASI (kullanici karari 2026-09-18): baslik metni artik SARAR.
Onceden "white-space:nowrap" idi ve uzun basliklar ("Toplam Hunter Paket Sayisi 2026 YTD"
gibi) tabloyu ekran disina tasiriyordu - Hosgeldin Paketleri ekraninda olculdu.
height:42px tablo hucresinde ASGARI yukseklik gibi davranir, iki-uc satirlik baslik
hucreyi kendiliginden buyutur. Dikey dolgu 0 -> 8px: sarmis satirlar hucre kenarina
yapismasin. Govde hucreleri TEK SATIR kalmaya devam eder (sayi kolonlari bozulmasin);
metin kolonunda sarma istenirse ".wrap" sinifi kullanilir. */
.mia thead th{position:sticky;top:0;z-index:2;background:#DCE6F2;height:42px;padding:8px 18px;text-align:left;
font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--ink-2);border-bottom:1px solid var(--line-2);border-top:0;
white-space:normal;overflow-wrap:break-word;line-height:1.3;vertical-align:middle}
/* GOVDE SARMASI (kullanici karari 2026-09-19): hucre metni artik SARAR.
Onceden nowrap idi; "Sektör Kodu" gibi tek bir uzun deger tasiyan kolon
("İnşaat ve Madencilik (Makine Sayısı -75)") butun kolonu o genislige zorluyor,
tablo ekrani asiyor ve sagdaki "İşlem" kolonu erisilemez hale geliyordu
(Kompresor / Metal / Enerji / Madencilik ekranlarinda gorulddu).
Sayilar bosluk icermedigi icin ("5.000", "01.01.2026") sarmadan etkilenmez.
Tek satirda kalmasi SART olan hucre icin ".nowrap" sinifi var.
Dikey dolgu 0 -> 10px: sarmis satirlar hucre kenarina yapismasin; height:52px
tablo hucresinde ASGARI yukseklik gibi davranir, iki satirlik hucre buyur. */
.mia tbody td{height:52px;padding:10px 18px;border-bottom:1px solid var(--line);border-top:0;font-size:13px;
white-space:normal;overflow-wrap:break-word;vertical-align:middle}
.mia td.nowrap,.mia th.nowrap{white-space:nowrap}
/* Ilk ve son kolonda ek bosluk: icerik panel kenarina yapismasin. */
.mia thead th:first-child,.mia tbody td:first-child,.mia tfoot th:first-child,.mia tfoot td:first-child{padding-left:22px}
.mia thead th:last-child,.mia tbody td:last-child,.mia tfoot th:last-child,.mia tfoot td:last-child{padding-right:22px}
.mia tbody tr:last-child td{border-bottom:0}
/* ZEBRA SERIT (kullanici istegi 2026-09-19). Gecis sirasinda Bootstrap'in
"table-striped" sinifi kaldirilmisti; serit istendigi icin katmanin KENDI
paletiyle geri geliyor - Bootstrap sinifi GERI EKLENMEZ, o rgba(0,0,0,.05)
basarak token duzenini bozuyordu.
SIRA ONEMLI: asagidaki :hover ve .sel kurallari bununla AYNI ozgullukte (0,2,2);
esitlikte son yazilan kazanir, bu yuzden zebra onlarin USTUNDE durmali. Aksi
halde serit satirlarda fare vurgusu ve secim rengi gorunmez olurdu.
Renk --canvas (#F4F7FA): --sunk'tan (#EDF2F7) bir ton acik, boylece hover
serit satirda da fark edilir. */
.mia tbody tr:nth-child(odd){background:var(--canvas)}
.mia tbody tr:hover{background:var(--sunk)}
.mia tbody tr.sel{background:var(--brand-soft)}
/* DIKEY AYRAC — "belirli belirsiz" (ayni istek). Yatay cizgi zaten vardi; kolonlar
arasi ince ayrac tablonun izgarasini okunur kiliyor. Renk yatay cizgiyle ayni
(--line), kalinlik 1px: zemin uzerinde ancak secilecek kadar. Son kolonda
kaldirilir, yoksa kart cercevesiyle ust uste binip cift cizgi gorunurdu. */
.mia thead th,.mia tbody td,.mia tfoot th,.mia tfoot td{border-right:1px solid var(--line)}
.mia thead th:last-child,.mia tbody td:last-child,
.mia tfoot th:last-child,.mia tfoot td:last-child{border-right:0}
/* Dip toplam satiri NORMAL akista durur - sticky DEGIL. Sadakat'ta sticky denendi,
toplam satiri veri satirlarinin ustune binip tablonun ortasinda duruyor gorundu. */
.mia tfoot th,.mia tfoot td{height:46px;padding:0 18px;background:var(--sunk);
border-top:1px solid var(--line-2);border-bottom:0;font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;vertical-align:middle}
.mia td.num,.mia th.num{text-align:right;font-variant-numeric:tabular-nums}
.mia td.mid,.mia th.mid{text-align:center}
/* Sarma artik VARSAYILAN; bu sinif yalnizca kolona taban genislik garantisi verir
(uzun unvan kolonu asiri daralmasin). Geriye donuk uyumluluk icin de duruyor. */
.mia td.wrap,.mia th.wrap{white-space:normal;min-width:200px}
.mia td.trunc,.mia th.trunc{max-width:260px;overflow:hidden;text-overflow:ellipsis}
/* KOLON GENISLIK TAVANI (kullanici geri bildirimi 2026-09-19: "tablo alanlari
gereksiz uzun"). Otomatik tablo yerlesiminde tarayici her kolona, icerigi tek
satira sigacak kadar yer vermeye CALISIR; "AVANS TRANS ULUSLAR ARASI TAŞIMACILIK
İTH.İHR.SAN.VE TİC.LTD.ŞTİ." gibi tek bir deger, Firma Unvani kolonunu 600px'e
tasiyip diger kolonlari eziyordu. Tavan konunca o kolon 360px'te sarar, artan
yer digerlerine dagilir.
- "table-layout:fixed" kullanan tablolari ETKILEMEZ (orada genislikler ilk
satirdan gelir); WpDsr ve DagitimKanali bu yuzden kendi yuzde degerlerini
korur.
- Belirli bir kolon tek satir kalmaliysa ".nowrap", ucnokta ile kesilmeliyse
".trunc" sinifi kullanilir. */
.mia thead th,.mia tbody td{max-width:360px}
/* SIKISIK TABLO — grafik yanindaki dokum tablolari (kullanici istegi 2026-09-19).
Liste tablosunun 42/52px satir olculeri bu tablolarda "satir aralari cok acik"
goruntusu veriyordu: grafikle yan yana durduklari icin daha yogun olmalilar.
Yukseklik "auto"ya alinir, aralik dolguyla belirlenir. Bu tablolar JavaScript
ile uretiliyor (SektorGrafik ve CmtTurkiye icindeki "tableHtml"), sinif oradan
veriliyor. */
.mia table.mia-compact{min-width:0}
.mia .mia-compact thead th{height:auto;padding:6px 8px;line-height:1.25}
.mia .mia-compact tbody td{height:auto;padding:5px 8px;line-height:1.25;font-size:12px}
.mia .mia-compact tfoot th,.mia .mia-compact tfoot td{height:auto;padding:6px 8px}
/* --- 5) ROZET / DURUM --- */
.mia .bdg{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:5px;white-space:nowrap}
.mia .bdg.ok{background:var(--ok-soft);color:var(--ok)}
.mia .bdg.warn{background:var(--warn-soft);color:var(--warn)}
.mia .bdg.crit{background:var(--crit-soft);color:var(--crit)}
.mia .bdg.info{background:var(--info-soft);color:var(--info)}
.mia .bdg.mute{background:var(--sunk);color:var(--ink-3)}
/* --- 6) FILTRE (yeni ekranlar icin; mevcut ekranlar .cfb seridini kullanir) --- */
.mia .filters{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;padding:14px;background:var(--paper);
border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh-1);margin-bottom:14px}
.mia .filters .fld{width:168px}
.mia .filters .go{display:flex;gap:8px;margin-left:auto}
/* --- 7) BOS DURUM --- */
.mia .empty{padding:54px 20px;text-align:center}
.mia .empty b{display:block;font-size:15px;font-weight:600;margin-bottom:4px}
.mia .empty p{font-size:13px;color:var(--ink-3);max-width:42ch;margin:0 auto 14px}
/* --- 8) FORM SAYFASI + OZET KUTULARI --- */
.mia .fsec{background:var(--paper);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh-1);margin-bottom:12px}
.mia .fsec > h2{font-size:12.5px;font-weight:600;padding:13px 16px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.mia .sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;background:var(--paper);
border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh-1);margin-bottom:14px;overflow:hidden}
.mia .sum > div{padding:12px 16px;border-right:1px solid var(--line)}
.mia .sum > div:last-child{border-right:0}
.mia .sum .k{font-size:10.5px;letter-spacing:.08em;font-weight:600;color:var(--ink-4)}
.mia .sum .v{font-size:19px;font-weight:500;margin-top:2px;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.mia *{animation:none!important;transition:none!important}}
/* ══ 9) ESKI TEMA KAPSAYICILARIYLA UYUM ═══════════════════════════════════
Program ekranlari (PVL Servis / CVL Servis / Filo / Ticari) yapisal olarak
YENIDEN YAZILMADI - islem akislari ve modallari oldugu gibi duruyor; yalniz
.mia kapsamina alindilar. Bu blok, tema kapsayicilarinin mia icinde ikinci bir
kaydirma alani, cift dolgu veya eski buton rengi uretmesini engeller. */
.mia .message-body{padding:0}
/* Ust dolgu 16 -> 10px (2026-09-19): filtre seridi ile altindaki ilk kutu arasinda
gereksiz genis bir bosluk kaliyordu. */
.mia .page-section{overflow:visible;padding:10px 20px 40px;width:auto;margin:0}
/* Filtre formu ile icerik arasindaki BOS SATIR. 56 view'da filtre blogundan sonra
duz bir
var; MiaUi'de kutular arasi bosluk zaten kurallarla veriliyor ve bu
ustune bir satir yuksekligi daha ekliyordu. Markup'a dokunmadan etkisiz
kilinir -
'ler yerinde kalir, bir gun kalip degisirse tek yerden geri acilir. */
.mia .message-body > br{display:none}
/* Bootstrap ".row" -15px yan kenar boslugu tasir; bunu telafi eden 15px dolgu
normalde ".container" veya ".col-*" tarafindan verilir. Icerik kutusunun
DOGRUDAN cocugu olan bir ".row" ise (orn. QR ekranindaki ozet kutucuklari)
iki yandan 15'er piksel disari tasar -> toplam 30px yatay tasma. Yalnizca
dogrudan cocuklar hedeflenir; dolgulu bir kabin icindeki row'lar etkilenmez. */
.mia .message-body > .row{margin-left:0;margin-right:0}
.mia .message-header{background:var(--canvas);padding:16px 20px 12px;border-bottom:1px solid var(--line)}
.mia .message-header .page-title,.mia .message-header h1{font-size:19px;letter-spacing:-.02em;margin:0}
.mia .card,.mia .card-fluid{background:var(--paper);border:1px solid var(--line);border-radius:10px;
box-shadow:var(--sh-1);margin-bottom:14px;overflow:hidden}
.mia .card-body{padding:14px}
.mia .card-title{font-size:12.5px;font-weight:600;color:var(--ink-2)}
/* _LayoutAdmin satir 133-139'daki ".card.card-fluid thead th" kurali (0,2,1) mia'nin
".mia thead th" kuralini (0,1,1) yenerdi: baslik beyaz kalirdi. Uc sinifla yazilarak
geri alinir. Sticky ve z-index layout'tan gelmeye devam eder. */
.mia .card.card-fluid thead th{background:#DCE6F2;border-bottom:1px solid var(--line-2)}
/* EKRAN TASMASI — COZUM SARMADIR, KARTI BUYUTMEK DEGIL (2026-09-19).
Burada bir sure ".mia .card.card-fluid:has(> table){width:max-content}" kurali
vardi; tablo tasidiginda kart da buyusun, tasma .message-body'ye ulassin diye.
KALDIRILDI, iki ayri sorun uretiyordu:
1) SARMAYI ETKISIZ KILIYORDU. Kart "max-content" ile icerige gore sinirsiz
genisleyince tablonun sigmak icin sarmasina gerek kalmiyor; hucreler yine
tek satirda kaliyor ve tablo ekrani asmaya devam ediyordu. Yani bir onceki
turda eklenen govde sarmasi hic devreye girmiyordu.
2) YUZDE GENISLIKLI TABLOLARDA BASLIKLARI DUSURUYORDU. WpDsr ("Welcome Pack
Performans") ve DagitimKanali tablolari "table-layout:fixed" + yuzde kolon
genisligi kullaniyor (16% / 30% / 9% ...). Yuzde deger, genisligi icerige
bagli (belirsiz) bir kabin icinde cozulemez; kolonlar sifira iniyor ve ilk
basliktan sonrasi gorunmez oluyordu.
Dogru davranis: kart normal genisliginde (%100) kalir, tablo da %100'e sigmak
icin hucrelerini SARAR. Tasma boylece kaynaginda biter. */
.mia .form-control{height:var(--h);padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r);
background:var(--paper);font-size:13px;width:100%;color:var(--ink)}
.mia .form-control:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(48,99,160,.15)}
.mia textarea.form-control{height:auto;padding:8px 10px;min-height:76px}
.mia .form-control-sm{height:28px;font-size:12px}
/* Bootstrap buton varyantlari: ".mia .btn" hepsini notr yapardi, renk anlami kaybolurdu. */
.mia .btn-primary,.mia .btn-subtle-primary,.mia .btn-success,.mia .btn-subtle-success,.mia .btn-outline-success{
background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.mia .btn-primary:hover,.mia .btn-subtle-primary:hover,.mia .btn-success:hover,.mia .btn-subtle-success:hover,.mia .btn-outline-success:hover{
background:var(--brand-2);border-color:var(--brand-2);color:#fff}
.mia .btn-danger,.mia .btn-subtle-danger,.mia .btn-outline-danger{
background:var(--paper);color:var(--crit);border-color:rgba(163,42,32,.3);font-weight:500}
.mia .btn-danger:hover,.mia .btn-subtle-danger:hover,.mia .btn-outline-danger:hover{
background:var(--crit-soft);border-color:var(--crit);color:var(--crit)}
.mia .btn-light,.mia .btn-secondary,.mia .btn-outline-secondary{
background:var(--paper);color:var(--ink);border-color:var(--line-2);font-weight:500}
.mia .btn-light:hover,.mia .btn-secondary:hover,.mia .btn-outline-secondary:hover{
border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
/* Modal: Bootstrap'in kendi kabugu KALIR (global modal blogu bilerek alinmadi),
yalniz .mia icinde acilan modalin tipografisi hizalanir. */
.mia .modal-title{font-size:14px;font-weight:600}
.mia .modal-body table{min-width:0}
/* ══ 10) DataTables CHROME ════════════════════════════════════════════════
Arama kutusu / sayfa uzunlugu / sayfalama mia gorunumune hizalanir.
Tablonun kendisi zaten 4. bolumdeki kurallarla boyaniyor. */
.mia .dataTables_wrapper{padding:0}
.mia .dataTables_wrapper .row:first-child{padding:14px 18px;border-bottom:1px solid var(--line);margin:0;align-items:center}
.mia .dataTables_wrapper .row:last-child{padding:12px 18px;border-top:1px solid var(--line);margin:0;align-items:center}
.mia .dataTables_wrapper .row > div{padding:0}
.mia .dataTables_length,.mia .dataTables_filter{font-size:12.5px;color:var(--ink-3)}
.mia .dataTables_filter{text-align:right}
.mia .dataTables_length label,.mia .dataTables_filter label{display:inline-flex;align-items:center;gap:8px;margin:0}
.mia .dataTables_length select,.mia .dataTables_filter input{height:var(--h);padding:0 10px;border:1px solid var(--line-2);
border-radius:var(--r);background:var(--paper);font-size:13px;color:var(--ink);width:auto;margin:0}
.mia .dataTables_filter input{min-width:220px}
.mia .dataTables_filter input:focus,.mia .dataTables_length select:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(48,99,160,.15)}
.mia .dataTables_info{font-size:12.5px;color:var(--ink-3);padding:0}
.mia .dataTables_paginate{margin:0}
.mia .pagination{margin:0;gap:4px;flex-wrap:wrap}
.mia .page-item .page-link{min-width:30px;height:30px;display:flex;align-items:center;justify-content:center;
border:1px solid var(--line-2);border-radius:7px;background:var(--paper);color:var(--ink-2);font-size:12.5px;padding:0 8px}
.mia .page-item .page-link:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.mia .page-item.active .page-link{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.mia .page-item.disabled .page-link{opacity:.45}
.mia table.dataTable{border-collapse:separate!important}
.mia table.dataTable thead th{background:#DCE6F2}
.mia table.dataTable thead .sorting,.mia table.dataTable thead .sorting_asc,.mia table.dataTable thead .sorting_desc{cursor:pointer}
/* ══ 11) MODAL — AYRI, OPT-IN KAPSAM (".mia-modal") ══════════════════════
NEDEN AYRI BIR KAPSAM:
1) Modal'lar sayfa govdesinin DISINDA duruyor. Olculdu (Views/Ticari/Index.cshtml):
.mia kapsayicisi 331. satirda kapaniyor, modal 340'ta basliyor - ".mia" kurallari
modal icerigine ULASMIYOR. Yorum/detay parcalari modal-body'ye AJAX ile basildigi
icin onlar da disarida kaliyor.
2) ".mia" sinifini dogrudan modal div'ine koymak COZUM DEGIL: ".mia" govde rengi
(background:var(--canvas)) tasiyor, ".modal" ise tum ekrani kaplayan saydam
kapsayicidir - opak gri bir ortu olurdu.
3) Erp_Sadakat bu iki sorunu GLOBAL (".mia" kapsami disi) ".modal ..." kurallariyla
cozdu; o yol burada 22 modal'i ve dokunulmamis her ekrani birden degistirirdi.
Bu yuzden kapsam opt-in: yalnizca etkilenir.
Tablo kurallari 4. bolumle ayni degerleri kullanir, yalnizca satir yuksekligi
daha dardir (modal icinde 52px cok yer kapliyor). */
.mia-modal .modal-content{border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-2)}
.mia-modal .modal-header{padding:14px 18px;border-bottom:1px solid var(--line);align-items:center}
.mia-modal .modal-title{font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
/* Renkli baslik cubugu tasiyan modallar (bg-primary / text-white) beyaz yazisini korur. */
.mia-modal .modal-header.bg-primary .modal-title,.mia-modal .modal-header.text-white .modal-title{color:#fff}
.mia-modal .modal-body{padding:18px;font-size:13px;color:var(--ink)}
.mia-modal .modal-footer{padding:12px 18px;border-top:1px solid var(--line)}
.mia-modal .close{opacity:.5;font-weight:400;text-shadow:none;color:var(--ink-2)}
.mia-modal .close:hover{opacity:1;color:var(--ink)}
.mia-modal label{font-size:12px;font-weight:500;color:var(--ink-2);margin-bottom:5px}
.mia-modal .form-group{margin-bottom:14px}
.mia-modal .form-control{height:var(--h);padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r);
background:var(--paper);font-size:13px;color:var(--ink);box-shadow:none}
.mia-modal select.form-control{height:var(--h)}
.mia-modal textarea.form-control{height:auto;padding:8px 10px;min-height:76px}
.mia-modal .form-control:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(48,99,160,.15)}
.mia-modal .form-control[readonly]{background:var(--sunk);color:var(--ink-3)}
.mia-modal .form-control-sm{height:28px;font-size:12px}
.mia-modal .btn{height:var(--h);padding:0 12px;border-radius:var(--r);font-size:12.5px;font-weight:500;
display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);
background:var(--paper);color:var(--ink);white-space:nowrap}
.mia-modal .btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.mia-modal .btn-primary,.mia-modal .btn-subtle-primary,.mia-modal .btn-success,.mia-modal .btn-subtle-success{
background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.mia-modal .btn-primary:hover,.mia-modal .btn-subtle-primary:hover,.mia-modal .btn-success:hover,.mia-modal .btn-subtle-success:hover{
background:var(--brand-2);border-color:var(--brand-2);color:#fff}
.mia-modal .btn-danger,.mia-modal .btn-subtle-danger,.mia-modal .btn-outline-danger{
background:var(--paper);color:var(--crit);border-color:rgba(163,42,32,.3);font-weight:500}
.mia-modal .btn-danger:hover,.mia-modal .btn-subtle-danger:hover,.mia-modal .btn-outline-danger:hover{
background:var(--crit-soft);border-color:var(--crit);color:var(--crit)}
.mia-modal .btn-sm{height:28px;padding:0 10px;font-size:12px}
/* Modal icindeki tablo (yorum listesi, cari detayi). AJAX ile basilan parcalar
kendi 'ini de tasiyor; kart kabugu onlardan geliyor, tablo bizden. */
.mia-modal .card{background:var(--paper);border:1px solid var(--line);border-radius:10px;box-shadow:none}
.mia-modal table{border-collapse:separate;border-spacing:0;width:100%;margin-bottom:0;color:var(--ink);min-width:0}
/* Baslik sarmasi burada da acik - ayni gerekce, bkz. ".mia thead th". */
.mia-modal thead th{background:#DCE6F2;height:38px;padding:8px 14px;text-align:left;font-size:11px;font-weight:600;
letter-spacing:.04em;color:var(--ink-2);border-bottom:1px solid var(--line-2);border-top:0;
white-space:normal;overflow-wrap:break-word;line-height:1.3;vertical-align:middle}
.mia-modal tbody td{height:44px;padding:8px 14px;border-bottom:1px solid var(--line);border-top:0;
font-size:13px;white-space:normal;overflow-wrap:break-word;vertical-align:middle}
.mia-modal tbody tr:last-child td{border-bottom:0}
/* Zebra ve dikey ayrac modal tablolarinda da ayni - gerekce ve sira kurali icin
4. bolumdeki nota bak (hover bununla ayni ozgullukte, ALTINDA durmali). */
.mia-modal tbody tr:nth-child(odd){background:var(--canvas)}
.mia-modal tbody tr:hover{background:var(--sunk)}
.mia-modal thead th,.mia-modal tbody td,.mia-modal tfoot th,.mia-modal tfoot td{border-right:1px solid var(--line)}
.mia-modal thead th:last-child,.mia-modal tbody td:last-child,
.mia-modal tfoot th:last-child,.mia-modal tfoot td:last-child{border-right:0}
.mia-modal tfoot th,.mia-modal tfoot td{height:40px;padding:0 14px;background:var(--sunk);
border-top:1px solid var(--line-2);border-bottom:0;font-size:12.5px;font-weight:600;color:var(--ink);vertical-align:middle}