/* =====================================================================================
   Pet2Pulse — ortak UI stilleri (AdminTemplate App.razor <style> bloğunun genişletilmiş hali).
   Tailwind CDN ile birlikte yüklenir: _content/Pet2Pulse.UI.Blazor.Shared/yu-ui.css
   Buradaki kurallar DÜZ CSS'tir (@apply yok) — derlenmiş Tailwind'e geçişte aynen kalabilir.
   ===================================================================================== */

* { font-family: 'Inter', sans-serif; }

/* --- Scrollbar (şablon) --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }

/* --- Slider (şablon) --- */
input[type=range] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #6366f1; cursor: pointer; }

.progress-animate { transition: width 1s ease-in-out; }
.modal-backdrop { backdrop-filter: blur(4px); }
.dropdown-menu { animation: slideDown 0.15s ease-out; }

/* =====================================================================================
   ÜST MENÜ — SAF CSS HOVER (tıklama YOK, JS ile aç/kapa YOK)
   Şablonun sınıf yapısı korunur:
     .nav-dropdown        > (tetikleyici) + .nav-dropdown-menu      (2. seviye, aşağı açılır)
     .nav-dropdown-sub    > (tetikleyici) + .nav-dropdown-submenu   (3. seviye, sağa açılır)
   Şablondaki "hidden + :hover { display:block }" yerine visibility/opacity geçişi kullanılır; böylece
   - AÇILMA ~80 ms gecikir (fare menünün üzerinden çaprazlama geçerken başka menü açılmaz = hover-intent),
   - KAPANMA ~200 ms gecikir (fare boşluktan/çaprazdan geçerken menü titremez, geri dönülebilir).
   visibility:hidden olan panel fareyi yakalamaz; görünür olduğu sürece (kapanma gecikmesi dahil) yakalar.
   Klavye: tetikleyici <button>'dır; Tab ile odaklanınca :focus-visible açık tutar (fare tıklaması
   :focus-visible üretmediği için tıklama sonrası menü "takılı" kalmaz).
   Yalnız lg (1024px) ve üstü; altında hamburger + akordeon (dokunma) kullanılır.
   ===================================================================================== */
.nav-dropdown,
.nav-dropdown-sub { position: relative; }

.nav-dropdown > .nav-dropdown-menu,
.nav-dropdown-sub > .nav-dropdown-submenu {
    display: block;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    z-index: 50;
    /* KAPANIŞ: 200 ms bekle, 120 ms sön, sonra gizle */
    transition: opacity .12s ease .2s, transform .12s ease .2s, visibility 0s linear .32s;
}
.nav-dropdown > .nav-dropdown-menu { top: 100%; left: 0; margin-top: 4px; transform: translateY(6px); }
.nav-dropdown-sub > .nav-dropdown-submenu { top: -9px; left: 100%; margin-left: 4px; transform: translateX(-4px); }

/* AÇILIŞ: hover veya klavye odağı */
.nav-dropdown:hover > .nav-dropdown-menu,
.nav-dropdown:has(:focus-visible) > .nav-dropdown-menu,
.nav-dropdown-sub:hover > .nav-dropdown-submenu,
.nav-dropdown-sub:has(:focus-visible) > .nav-dropdown-submenu {
    visibility: visible;
    opacity: 1;
    transform: none;
    z-index: 60;
    transition: opacity .14s ease .08s, transform .14s ease .08s, visibility 0s linear .08s;
}
/* :has desteklemeyen eski tarayıcılar için klavye yedeği */
@supports not selector(:has(*)) {
    .nav-dropdown:focus-within > .nav-dropdown-menu,
    .nav-dropdown-sub:focus-within > .nav-dropdown-submenu { visibility: visible; opacity: 1; transform: none; }
}

/* Görünmez köprü: tetikleyici ile panel arasındaki boşlukta fare menüyü kapatmasın (şablon) */
.nav-dropdown-menu::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.nav-dropdown-submenu::before { content: ''; position: absolute; left: -10px; top: 0; bottom: 0; width: 10px; }

/* Sağ kenara yakın menüler: 2. seviye sağa hizalanır, 3. seviye SOLA açılır (yu-ui.js ölçer; C# son öğeye varsayılan verir) */
.nav-dropdown.nav-align-end > .nav-dropdown-menu { left: auto; right: 0; }
.nav-dropdown-sub.nav-flip > .nav-dropdown-submenu { left: auto; right: 100%; margin-left: 0; margin-right: 4px; transform: translateX(4px); }
.nav-dropdown-sub.nav-flip > .nav-dropdown-submenu::before { left: auto; right: -10px; }
.nav-dropdown-sub.nav-flip:hover > .nav-dropdown-submenu,
.nav-dropdown-sub.nav-flip:has(:focus-visible) > .nav-dropdown-submenu { transform: none; }

/* Grup tetikleyicisi hover'dayken vurgu */
.nav-dropdown-sub:hover > .nav-sub-trigger,
.nav-dropdown-sub:has(:focus-visible) > .nav-sub-trigger { background-color: rgb(238 242 255); color: rgb(79 70 229); }
.dark .nav-dropdown-sub:hover > .nav-sub-trigger,
.dark .nav-dropdown-sub:has(:focus-visible) > .nav-sub-trigger { background-color: rgb(51 65 85); color: rgb(165 180 252); }

/* Üst öğe açıkken ok döner */
.nav-dropdown .nav-caret { transition: transform .15s ease; }
.nav-dropdown:hover > * > .nav-caret,
.nav-dropdown:has(:focus-visible) > * > .nav-caret { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .nav-dropdown > .nav-dropdown-menu,
    .nav-dropdown-sub > .nav-dropdown-submenu { transform: none !important; }
}

/* =====================================================================================
   Bileşen seti yardımcıları
   ===================================================================================== */

/* İskelet yükleniyor animasyonu */
.yu-skeleton {
    background: linear-gradient(90deg, rgba(148,163,184,.18) 25%, rgba(148,163,184,.32) 37%, rgba(148,163,184,.18) 63%);
    background-size: 400% 100%;
    animation: yuShimmer 1.4s ease infinite;
    border-radius: .375rem;
}
@keyframes yuShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Doğrulama iletileri (Blazor ValidationMessage) */
.validation-message { color: #ef4444; font-size: .75rem; margin-top: .25rem; }
.invalid:not(:focus) { border-color: #f87171 !important; }
.yu-input.invalid { border-color: #f87171 !important; }

/* Sürükle-bırak hedefi */
.yu-drop-active { outline: 2px dashed #6366f1; outline-offset: 2px; background-color: rgba(99,102,241,.06); }

/* Blazor hata çubuğu (global beklenmeyen hata) */
#blazor-error-ui { display: none; }
#blazor-error-ui.yu-visible,
#blazor-error-ui[style*="block"] { display: flex !important; }

/* Tablo satırı tıklanabilir */
.yu-row-clickable { cursor: pointer; }

/* Sayısal alanlar sağa yaslı */
.yu-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Katman sırası (statik CSS: Tailwind CDN'in "ilk görünüşte üretilen" sınıflarına bağlı kalmasın) */
.yu-z-overlay { z-index: 65; }   /* Modal, Drawer */
.yu-z-toast { z-index: 70; }     /* bildirimler */
.yu-z-confirm { z-index: 75; }   /* onay penceresi — her zaman modal/drawer üstünde */
.yu-z-errorbar { z-index: 80; }  /* beklenmeyen hata çubuğu */

/* Koyu tema: koyu zeminde indigo-600 (#4f46e5) metin okunmuyor (kontrast ~2.3). Açık bir "dark:text-*" sınıfı
   verilmemiş bağlantı/vurgu metinleri primary-400'e çekilir (kontrast ~5+). Açık dark: sınıfı olan öğelere dokunulmaz. */
.dark .text-primary-600:not([class*="dark:text-"]),
.dark .text-primary-700:not([class*="dark:text-"]) { color: #818cf8; }
.dark .hover\:text-primary-700:not([class*="dark:hover:text-"]):hover,
.dark .hover\:text-primary-600:not([class*="dark:hover:text-"]):hover { color: #a5b4fc; }