/*
|--------------------------------------------------------------------------
| UYGULAMA ANA STİL DOSYASI — public/assets/css/app.css
|--------------------------------------------------------------------------
| Proje     : Entegre Admin Paneli
| Bootstrap : 5.4.0
| Kural      : Inline style yasak. Tüm özel stiller bu dosyada toplanır.
| Sıralama   : Değişkenler → Tipografi → Bileşenler → Dark Mode
|--------------------------------------------------------------------------
*/


/* ══════════════════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES (DEĞİŞKENLER)
   Renk, font ve boşluk değerlerini merkezi olarak yönetir.
   Bootstrap'ın kendi --bs-* değişkenleriyle çakışmamak için --app- prefix.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Tipografi — Yerel Fontlar */
    --app-font-poppins: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --app-font-google: "Google Sans", sans-serif;
    --app-font-google-flex: "Google Sans Flex", sans-serif;
    --app-font-google-code: "Google Sans Code", monospace;
    --app-font-serif: "DM Serif Text", Georgia, "Times New Roman", serif;
    --app-font-gilroy: "Gilroy", sans-serif;

    /* Semantik Font Kullanımı */
    --app-font-primary: var(--app-font-poppins);
    --app-font-secondary: var(--app-font-google);
    --app-font-accent: var(--app-font-serif);
    --app-font-mono: var(--app-font-google-code);

    /* Temel font boyutları */
    --app-font-size-base: 0.9375rem;
    /* 15px — Bootstrap 16px'e göre kompakt */
    --app-line-height: 1.6;

    /* jQuery UI bileşenlerinin z-index hiyerarşisi */
    --app-zindex-autocomplete: 1055;
    /* Bootstrap modal (1050) üzerinde olmalı */

    /* Geçiş süresi — tüm animasyonlarda tutarlı hız */
    --app-transition-speed: 0.15s;
}


/* ══════════════════════════════════════════════════════════════════════════
   TEMEL TİPOGRAFİ & HELPER CLASSES
   ══════════════════════════════════════════════════════════════════════════ */

/*
 | body: Tüm sayfanın temel yazı tipi, boyutu ve render kalitesi.
 | -webkit-font-smoothing: macOS/iOS'ta piksel seviyesinde pürüzsüz font.
 | text-rendering: Küçük punto metinlerde okunabilirliği artırır.
*/
body {
    font-family: var(--app-font-primary);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ── Tipografi Yardımcı Sınıfları (Modular) ────────────────────────────── */

.font-poppins {
    font-family: var(--app-font-poppins) !important;
}

.font-google {
    font-family: var(--app-font-google) !important;
}

.font-google-flex {
    font-family: var(--app-font-google-flex) !important;
}

.font-google-code {
    font-family: var(--app-font-google-code) !important;
}

.font-serif {
    font-family: var(--app-font-serif) !important;
}

.font-dm {
    font-family: var(--app-font-serif) !important;
}

/* Geriye dönük uyumluluk */
.font-gilroy {
    font-family: var(--app-font-gilroy) !important;
}

/* Semantik yardımcılar */
.font-primary {
    font-family: var(--app-font-primary) !important;
}

.font-secondary {
    font-family: var(--app-font-secondary) !important;
}

.font-accent {
    font-family: var(--app-font-accent) !important;
}

.font-mono {
    font-family: var(--app-font-mono) !important;
}




/* ══════════════════════════════════════════════════════════════════════════
   ERİŞİLEBİLİRLİK — BAĞLANTI & BUTON
   ══════════════════════════════════════════════════════════════════════════ */

/*
 | -webkit-tap-highlight-color: iOS Safari'de bağlantılara tıklandığında
 |   beliren mavi/gri highlight rengini kaldırır (UX iyileştirme).
*/
a,
button {
    -webkit-tap-highlight-color: transparent;
}




/* ══════════════════════════════════════════════════════════════════════════
   ANA İÇERİK ALANI
   ══════════════════════════════════════════════════════════════════════════ */



/* ══════════════════════════════════════════════════════════════════════════
   jQuery UI — BOOTSTRAP 5 TEMA UYUMU
   jQuery UI'ın varsayılan stilleri Bootstrap ile çakışır.
   Aşağıdaki overrides, görsel tutarlılığı sağlar.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── jQuery UI Combobox Wrapper ───────────────────────────────────────────
 | position: relative: Toggle butonunun pozisyonlanması için referans nokta.
*/
.custom-combobox {
    position: relative;
    display: block;
    width: 100%;
}

/*
 | Toggle butonu: Input'un sağ kenarına yapışır, tıklanabilir alan sunar.
 | CSS ile konumlandırıldığı için JS'de ek hesaplama gerekmez.
*/
.custom-combobox-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--bs-secondary-color, #6c757d);
    transition: color var(--app-transition-speed) ease;
}

.custom-combobox-toggle:hover,
.custom-combobox-toggle:focus {
    color: var(--bs-primary, #0d6efd);
    outline: none;
    /* Focus görünümü Bootstrap tarafından sağlanır */
}

/*
 | Input alanı: Toggle butonuyla içeriğin üst üste binmemesi için
 | sağ tarafta ekstra padding bırakılır.
*/
.custom-combobox-input {
    padding-right: 2.75rem;
}

/* ── jQuery UI Autocomplete Dropdown ─────────────────────────────────────
 | Bootstrap'ın dropdown bileşeniyle görsel uyum sağlanır.
 | z-index: Modal (1050) üzerinde görünmesi için 1055 kullanılır.
*/
.ui-autocomplete {
    max-height: 220px;
    /* Uzun listelerde scroll aktif olur */
    overflow-y: auto;
    /* Dikey scroll */
    overflow-x: hidden;
    /* Yatay scroll engellenir */
    z-index: var(--app-zindex-autocomplete);
    border-radius: 0.5rem;
    padding: 0.25rem 0;
    background-color: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.12));
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.06);
    font-family: var(--app-font-primary);
    font-size: var(--app-font-size-base);
}

/* ── jQuery UI Menü Öğeleri ──────────────────────────────────────────────*/

.ui-menu .ui-menu-item-wrapper {
    padding: 0.5rem 1rem;
    cursor: pointer;
    color: var(--bs-body-color, #212529);
    transition: background-color var(--app-transition-speed) ease,
        color var(--app-transition-speed) ease;
    border: none;
    /* jQuery UI'ın varsayılan border'ını kaldır */
}

/*
 | Hover ve klavye ile seçili öğe: Bootstrap primary rengi kullanılır.
 | !important: jQuery UI'ın kendi inline stillerini ezmek için gerekli.
*/
.ui-menu .ui-menu-item-wrapper.ui-state-active,
.ui-menu .ui-menu-item-wrapper:hover {
    background-color: var(--bs-primary, #0d6efd) !important;
    color: #fff !important;
    border-color: var(--bs-primary, #0d6efd) !important;
    border-radius: 0.25rem;
    margin: 0 0.25rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE — Bootstrap data-bs-theme="dark" ile Uyum
   Bootstrap 5.3+ color mode sistemini kullanır.
   ══════════════════════════════════════════════════════════════════════════ */

/*
 | Dark mod: jQuery UI bileşenleri Bootstrap'ın dark mode değişkenlerini
 |   otomatik almadığı için manuel override gereklidir.
*/
[data-bs-theme="dark"] .ui-autocomplete {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .ui-menu .ui-menu-item-wrapper {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .ui-menu .ui-menu-item-wrapper.ui-state-active,
[data-bs-theme="dark"] .ui-menu .ui-menu-item-wrapper:hover {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   SAFARI CROSS-BROWSER UYUMLULUK DÜZELTMELERI
   ══════════════════════════════════════════════════════════════════════════ */

/*
 | Safari'de position: sticky içindeki flexbox öğeleri bazen yanlış
 | hesaplanır. Overflow tanımı bunu çözer.
*/
.table-responsive {
    -webkit-overflow-scrolling: touch;
    /* iOS Safari momentum scroll */
}

/*
 | Safari'de bazı button elementleri varsayılan padding/görünüm alır.
 | Reset ile Bootstrap stillerinin düzgün uygulanması sağlanır.
*/
button {
    -webkit-appearance: none;
    appearance: none;
}

/*
 | iOS Safari'de input zoom sorununu önler.
 | font-size 16px altında Safari otomatik zoom yapar — bu bunu engeller.
*/
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
    font-size: max(1rem, 16px);
    /* 16px altına düşmesini engeller */
}