/* ============================================================
   B2B Override'lari — Bootstrap / DevExtreme / SweetAlert / Notyf
   Rehber: docs/B2B_UI_GUIDE.md §4, §7, §10
   Amac: ucuncu parti varsayilanlarini Isbir kirmizi temasina hizalamak.
   Bu dosya SADECE B2B vitrinde yuklenir (_ShopStyles.cshtml).
   ============================================================ */

/* ------------------------------------------------------------
   1) Bootstrap "primary" yardimci siniflari
   Bootstrap'te primary = mavi (#0d6efd). B2B'de primary = Isbir kirmizisi.
   Bu remap olmadan .text-primary / .bg-primary / .border-primary
   kirmizi temali arayuzde mavi render eder (sol menu aktif ikonu dahil).
   ------------------------------------------------------------ */
.text-primary {
    color: var(--primary-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

.border-primary {
    border-color: var(--primary-color) !important;
}

.link-primary {
    color: var(--primary-color) !important;
}

    .link-primary:hover,
    .link-primary:focus {
        color: var(--primary-color-hover) !important;
    }

/* .badge.bg-primary icindeki metin her zaman beyaz (kirmizi zemin kurali) */
.badge.bg-primary,
.badge.bg-danger,
.badge.bg-success,
.badge.bg-secondary {
    color: var(--white) !important;
}

.badge.bg-warning {
    color: var(--gray-900) !important;
}

/* Bootstrap form-check / form-switch aktif rengi */
.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-check-input:focus {
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

/* Bootstrap nav-pills / nav-tabs aktif rengi */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--primary-color);
    color: var(--white);
}

.nav-tabs .nav-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.nav-tabs .nav-link:hover {
    color: var(--primary-color-hover);
}

/* Bootstrap dropdown aktif ogesi */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--primary-color);
    color: var(--white);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--primary-color-light);
    color: var(--primary-color);
}

/* Bootstrap list-group aktif/secili ogesi (siralama menusu vb.) —
   varsayilani mavi (#0d6efd); dropdown-item remap'iyle ayni kirmizi rampa. */
.list-group-item.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

    .list-group-item.active:hover,
    .list-group-item.active:focus {
        background-color: var(--primary-color-hover);
        border-color: var(--primary-color-hover);
        color: var(--white);
    }

.list-group-item-action:not(.active):hover,
.list-group-item-action:not(.active):focus {
    background-color: var(--primary-color-light);
    color: var(--primary-color);
}

/* Bootstrap sayfalama */
.page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.page-link {
    color: var(--primary-color);
}

    .page-link:hover {
        color: var(--primary-color-hover);
        background-color: var(--primary-color-light);
    }

/* Bootstrap ilerleme cubugu */
.progress-bar {
    background-color: var(--primary-color);
}

/* Bootstrap spinner varsayilan rengi */
.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: var(--primary-color) !important;
}

/* ------------------------------------------------------------
   2) Odak halkasi — her yerde marka kirmizisi
   Bootstrap'in mavi rgba(13,110,253,.25) halkalarini ezer.
   ------------------------------------------------------------ */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible,
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    box-shadow: var(--focus-ring) !important;
    outline: none !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
}

/* Yikici eylemlerde kirmizi-tonlu degil, danger-tonlu halka */
.btn-danger:focus-visible {
    box-shadow: var(--focus-ring-danger) !important;
}

/* ------------------------------------------------------------
   3) SweetAlert (sweetalert 2.x — global `swal`)
   Onceki kural (b2b/layout.css) tum footer butonlarini — Iptal dahil —
   ayni kirmiziya zorluyordu; onay ve iptal ayirt edilemiyordu.
   Rehber §7.3: onay = primary/danger, iptal = notr gri.
   ------------------------------------------------------------ */
.swal-footer button,
.swal-footer button:hover,
.swal-footer button:focus,
.swal-footer button:focus-visible,
.swal-footer button:active {
    padding: 10px 24px;
    border-radius: var(--radius-md);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    box-shadow: none;
    outline: none;
    transition: background-color var(--transition-fast);
}

.swal-button--confirm {
    background: var(--primary-color) !important;
    background-color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
    color: var(--white) !important;
}

    .swal-button--confirm:hover {
        background: var(--primary-color-hover) !important;
        background-color: var(--primary-color-hover) !important;
        border-color: var(--primary-color-hover) !important;
    }

    .swal-button--confirm:active {
        background: var(--primary-color-active) !important;
        background-color: var(--primary-color-active) !important;
    }

    .swal-button--confirm:focus-visible {
        box-shadow: var(--focus-ring) !important;
    }

/* Yikici onay — Notifier.confirm({ danger: true }) */
.swal-button--confirm.swal-button--danger {
    background: var(--danger) !important;
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
}

    .swal-button--confirm.swal-button--danger:hover {
        background: var(--danger-hover) !important;
        background-color: var(--danger-hover) !important;
        border-color: var(--danger-hover) !important;
    }

.swal-button--cancel {
    background: var(--gray-150) !important;
    background-color: var(--gray-150) !important;
    border: 1px solid var(--border-color-medium) !important;
    color: var(--text-secondary) !important;
}

    .swal-button--cancel:hover {
        background: var(--gray-200) !important;
        background-color: var(--gray-200) !important;
        color: var(--text-main) !important;
    }

    .swal-button--cancel:active {
        background: var(--gray-300) !important;
        background-color: var(--gray-300) !important;
    }

.swal-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    color: var(--text-main);
}

.swal-text {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    text-align: center;
}

/* ------------------------------------------------------------
   4) Notyf toast — Rehber §7

   Gorunum: koyu notr yuzey + tipe gore renkli SOL VURGU ve ikon.
   Dolu yesil/kirmizi bloklar yerine bu duzen kurumsal ve sakin durur;
   marka kirmizisi yalnizca hata durumunda vurgu olarak gorunur.

   Yapilandirma `js/b2b/toast.js` icindedir (konum: alt orta, sure,
   azami 3 bildirim). Burada YALNIZCA gorunum ve mobil bosluklar tanimlanir.
   ------------------------------------------------------------ */
.notyf {
    padding: 1rem;
}

.notyf__toast {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: 1.45;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-width: 30rem;
    border-left: 4px solid var(--gray-500);
    /* Yuzey rengini normalde notyf satir ici yazar (toast.js → backgroundColor).
       Burasi yedek: yapilandirmasiz bir Notyf ornegi olusturulsa da toast
       okunabilir kalir. */
    background-color: var(--gray-900);
}

.notyf__wrapper {
    padding: 0.875rem 1rem;
}

.notyf__message {
    color: var(--white);
    font-weight: var(--font-weight-medium);
}

/* Notyf'in kendi daire/tik ikonlari yerine FA6 kullaniliyor (Rehber §6.1).
   Glif DAIMA beyazdir; tip rengi ikonun icinde degil, tipe gore renklenen
   yuvarlak rozet zemininde ve sol vurgu cizgisinde tasinir.
   (`fa-circle-check` gibi oyma ikonlarda tik seffaf kalip arkadaki koyu yuzeyi
   gosteriyor, siyah dolu gibi gorunuyordu — duz glife gecildi, bkz. toast.js.) */
/* Secici `.notyf__icon` ile bir kademe yukseltildi: FA6'nin `.fa-solid` kurali da
   `display` yaziyor ve ayni ozgullukte (0,1,0). Dosya yukleme sirasina bagli
   kalmamak icin (0,2,0) kullaniliyor.

   Glif rengi BURADAN degil `toast.js`'teki `icon.color` alanindan gelir: notyf
   ikona satir ici `style.color` yazar ve satir ici stil bu kurali ezer. */
.notyf__icon .notyf__icon--b2b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    line-height: 1;
    background-color: var(--gray-500);
}

.notyf__toast--success {
    border-left-color: var(--success);
}

    .notyf__toast--success .notyf__icon .notyf__icon--b2b {
        background-color: var(--success);
    }

.notyf__toast--error {
    border-left-color: var(--primary-color);
}

    .notyf__toast--error .notyf__icon .notyf__icon--b2b {
        background-color: var(--primary-color);
    }

.notyf__toast--warning {
    border-left-color: var(--warning);
}

    .notyf__toast--warning .notyf__icon .notyf__icon--b2b {
        background-color: var(--warning);
    }

.notyf__toast--info {
    border-left-color: var(--info);
}

    .notyf__toast--info .notyf__icon .notyf__icon--b2b {
        background-color: var(--info);
    }

.notyf__dismiss-btn {
    background-color: transparent;
    opacity: 0.55;
}

    .notyf__dismiss-btn:hover {
        background-color: transparent;
        opacity: 1;
    }

/* Mobil: tam genislik yerine daraltilmis, alt navigasyonun HEMEN USTUNDE.
   notyf'in kendi `<=480px` kurali toast'i tam genislik + kose yaricapsiz yapiyor;
   burada `768px` altinda tamamen degistiriliyor.

   Alt bosluk = alt bar yuksekligi + centik guvenli alani + 8px.
   `--b2b-bottomnav-h` yalnizca alt barin render edildigi yerde tanimlidir
   (mobile-nav.css); tanimsizsa yedek 0px devreye girer ve toast sayfanin
   altindan 8px yukarida durur. */
@media (max-width: 767.98px) {
    .notyf {
        padding: 0 0.75rem calc(var(--b2b-bottomnav-h, 0px) + env(safe-area-inset-bottom, 0px) + 0.5rem);
    }

    .notyf__toast {
        width: 100%;
        max-width: 26rem;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
    }

    .notyf__wrapper {
        padding: 0.75rem 0.875rem;
    }

    /* Yigindaki toast'lar arasindaki bosluk (notyf varsayilani 15px). */
    .notyf__toast--lower {
        margin-top: 0.5rem;
    }
}

/* ------------------------------------------------------------
   5) DevExtreme DataGrid — kirmizi tema + notr odak
   Rehber §10. Sayfa bazli .dx-* override'i yazilmaz; hepsi burada.
   ------------------------------------------------------------ */
.dx-datagrid {
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    color: var(--text-main);
}

.dx-datagrid-headers {
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
}

/* Baslikta `line-height` font boyutuna ESITLENMEZ (Rehber §10.2): DevExtreme
   basligi `overflow: hidden` ile kirptigi icin `Ü`, `Ğ`, `İ` gibi harflerin
   ust isaretleri kesilir ve baslik yanlis okunur ("Ürün" → "Urün"). */
.dx-datagrid-headers .dx-datagrid-text-content {
    line-height: 1.45;
    padding-top: 2px;
    padding-bottom: 2px;
}

.dx-datagrid-rowsview .dx-row-alt > td {
    background-color: var(--gray-50);
}

.dx-datagrid-rowsview .dx-selection > td,
.dx-datagrid-rowsview .dx-row:hover > td {
    background-color: var(--primary-color-light) !important;
    color: var(--text-main) !important;
}

.dx-datagrid-pager .dx-page.dx-selection,
.dx-datagrid-pager .dx-page-size.dx-selection {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
    border-radius: var(--radius-sm);
}

.dx-datagrid-pager .dx-page:hover,
.dx-datagrid-pager .dx-page-size:hover {
    background-color: var(--primary-color-light);
    color: var(--primary-color);
    border-radius: var(--radius-sm);
}

.dx-datagrid-pager .dx-page:focus,
.dx-datagrid-pager .dx-page:focus-visible,
.dx-datagrid-pager .dx-navigate-button:focus,
.dx-datagrid-pager .dx-navigate-button:focus-visible {
    box-shadow: var(--focus-ring) !important;
    outline: none !important;
}

.dx-datagrid .dx-link {
    color: var(--primary-color);
}

.dx-loadpanel-content,
.dx-loadindicator-icon .dx-loadindicator-segment {
    color: var(--primary-color);
}

/* ------------------------------------------------------------
   6) Sepet miktar kontrolu — basilma ve devre disi geri bildirimi
   Rehber §8.2: istek ucarken butonlar pasif gorunur.
   ------------------------------------------------------------ */
.qty-count:active,
.basket-product-qty-input .qty-count:active {
    background: var(--primary-color-light);
    color: var(--primary-color-active);
    transform: scale(0.94);
}

.qty-count:disabled,
.qty-count[disabled],
.basket-product-qty-input .qty-count:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: none;
    color: var(--gray-400);
    transform: none;
}

.qty-count:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

/* Miktar guncellemesi ucarken satirin tamami pasiflesir */
.qty-pending .basket-product-qty-input {
    opacity: 0.6;
    pointer-events: none;
}

/* ------------------------------------------------------------
   7) select2 — kirmizi tema
   ------------------------------------------------------------ */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--primary-color);
    color: var(--white);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

/* ------------------------------------------------------------
   8) daterangepicker — kirmizi tema
   ------------------------------------------------------------ */
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

.daterangepicker td.in-range {
    background-color: var(--primary-color-light);
    color: var(--text-main);
}

.daterangepicker .ranges li.active {
    background-color: var(--primary-color);
    color: var(--white);
}

.daterangepicker .drp-buttons .applyBtn {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}