/*
 * Panel teması (admin + mağaza) — "Velzon default" uyarlaması.
 *
 * Kaynak: Velzon 4.4.4 "default" varyantının tasarım belirteçleri
 * (renkler, tipografi, kenar çubuğu) Filament işaretlemesine uyarlandı.
 * Velzon'un kendisi KULLANILMIYOR — o bir Bootstrap şablonu; buradaki
 * iş yalnızca görünümünü taşımak. Gradyan yok (ürün kararı).
 *
 * Belirteçler (Velzon _variables*.scss):
 *   zemin #f3f3f9 · kenar çubuğu #405189 (çivit) · pasif menü #abb9e8
 *   aktif menü beyaz + rgba(255,255,255,.15) · grup başlığı #838fb9
 *   kart gölgesi 0 1px 2px rgba(56,65,74,.15) · yazı Poppins/HK Grotesk
 *
 * Yalnızca açık tema hedeflenir; koyu tema Filament varsayılanında.
 */

@font-face {
    font-family: 'Poppins';
    font-weight: 400;
    font-display: swap;
    src: url('../vendor/velzon-fonts/poppins-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-weight: 500;
    font-display: swap;
    src: url('../vendor/velzon-fonts/poppins-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-weight: 600;
    font-display: swap;
    src: url('../vendor/velzon-fonts/poppins-600.woff2') format('woff2');
}

@font-face {
    font-family: 'HK Grotesk';
    font-weight: 400;
    font-display: swap;
    src: url('../vendor/velzon-fonts/hkgrotesk-regular.woff') format('woff');
}

@font-face {
    font-family: 'HK Grotesk';
    font-weight: 500;
    font-display: swap;
    src: url('../vendor/velzon-fonts/hkgrotesk-medium.woff') format('woff');
}

@font-face {
    font-family: 'HK Grotesk';
    font-weight: 700;
    font-display: swap;
    src: url('../vendor/velzon-fonts/hkgrotesk-bold.woff') format('woff');
}

:root {
    --vz-bg: #f3f3f9;            /* gövde zemini                    */
    --vz-sidebar: #405189;       /* çivit kenar çubuğu              */
    --vz-sidebar-item: #abb9e8;  /* pasif menü ögesi                */
    --vz-sidebar-title: #838fb9; /* menü grup başlığı               */
    --vz-card-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
    --vz-border: #e9ebec;
    --vz-ink: #495057;
    --vz-ink-soft: #878a99;
    --vz-radius: 0.4rem;
}

/* ------------------------------------------------------------ Zemin */

.fi-body {
    font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
}

html:not(.dark) .fi-body,
html:not(.dark) .fi-main-ctn,
html:not(.dark) .fi-main {
    background-color: var(--vz-bg);
    color: var(--vz-ink);
}

/* ---------------------------------------- Kenar çubuğu: koyu çivit */

html:not(.dark) .fi-sidebar,
html:not(.dark) .fi-sidebar-header {
    background-color: var(--vz-sidebar);
    border-right: 0;
    border-bottom: 0;
    box-shadow: 0 2px 4px rgba(15, 34, 58, 0.12);
}

html:not(.dark) .fi-sidebar-header .fi-logo {
    color: #ffffff;
}

.fi-sidebar-item-btn {
    border-radius: 0.35rem;
    font-family: 'HK Grotesk', 'Poppins', sans-serif;
    font-size: 0.9375rem;
}

html:not(.dark) .fi-sidebar-item-btn .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar-item-btn .fi-sidebar-item-icon {
    color: var(--vz-sidebar-item);
}

html:not(.dark) .fi-sidebar-item-btn:hover .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar-item-btn:hover .fi-sidebar-item-icon {
    color: #ffffff;
}

html:not(.dark) .fi-sidebar-item-btn:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

html:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: rgba(255, 255, 255, 0.15);
}

html:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon {
    color: #ffffff;
}

html:not(.dark) .fi-sidebar-group-btn,
html:not(.dark) .fi-sidebar-group-btn .fi-sidebar-group-label {
    color: var(--vz-sidebar-title);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.6875rem;
}

html:not(.dark) .fi-sidebar-group-collapse-btn {
    color: var(--vz-sidebar-title);
}

/* -------------------------------------------------------- Üst çubuk */

html:not(.dark) .fi-topbar,
html:not(.dark) .fi-topbar nav {
    background-color: #ffffff;
    border-bottom: 0;
    box-shadow: var(--vz-card-shadow);
}

/* ------------------------------------------------- Kart ve bölümler */

html:not(.dark) .fi-section,
html:not(.dark) .fi-ta-ctn,
html:not(.dark) .fi-wi-stats-overview-stat,
html:not(.dark) .fi-fo-tabs,
html:not(.dark) .fi-modal-window {
    background-color: #ffffff;
    border: 0;
    border-radius: var(--vz-radius);
    box-shadow: var(--vz-card-shadow);
}

/* ------------------------------------------------------- Göstergeler */

.fi-wi-stats-overview-stat {
    padding: 1rem 1.1rem;
}

.fi-wi-stats-overview-stat-value {
    font-weight: 600;
    letter-spacing: -0.01em;
}

html:not(.dark) .fi-wi-stats-overview-stat-label {
    color: var(--vz-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.6875rem;
    font-weight: 500;
}

/* ------------------------------------------------------------ Tablo */

html:not(.dark) .fi-ta-header-ctn {
    border-bottom: 1px solid var(--vz-border);
}

html:not(.dark) .fi-ta-header-cell {
    background-color: #f3f6f9;
    color: var(--vz-ink);
    font-weight: 600;
    font-size: 0.8125rem;
}

html:not(.dark) .fi-ta-row:hover {
    background-color: #f3f6f9;
}

/* --------------------------------------------------- Düğme ve rozet */

.fi-btn {
    border-radius: 0.25rem;
    box-shadow: none;
    background-image: none;
    font-weight: 500;
}

/*
 * ÇERÇEVESİZ KALAN DÜĞMELER — SAHADA YAŞANDI.
 *
 * Filament, dolgusuz düğmelerin (repeater "Aralık ekle", gri ikincil
 * eylemler) çerçevesini box-shadow (ring) ile çiziyor. Yukarıdaki düz
 * görünüm kuralı o gölgeyi silince bu düğmeler çıplak metne dönüştü:
 * salon, çalışma saati ekleme düğmesini göremedi.
 *
 * Gölge yerine gerçek kenarlık veriliyor; dolgulu (renk sınıflı)
 * düğmeler zaten zeminleriyle ayırt ediliyor ve kapsam dışı.
 */
html:not(.dark) .fi-btn:not(.fi-color-primary):not(.fi-color-danger):not(.fi-color-success):not(.fi-color-warning):not(.fi-color-info) {
    border: 1px solid var(--vz-border);
    background-color: #ffffff;
}

html:not(.dark) .fi-btn:not(.fi-color-primary):not(.fi-color-danger):not(.fi-color-success):not(.fi-color-warning):not(.fi-color-info):hover {
    border-color: #405189;
}

.fi-badge {
    border-radius: 0.25rem;
    font-weight: 500;
}

/* ------------------------------------------------------------- Form */

/*
 * Kenarlık YALNIZCA sarmalayıcıda. Filament iç denetimin kenarlığını
 * bilinçle kaldırıyor (`.fi-select-input { border-style: none }`);
 * ikisine birden kenarlık vermek iç içe kutu görüntüsü üretiyordu.
 */
html:not(.dark) .fi-input-wrp {
    border-radius: 0.25rem;
    border: 1px solid var(--vz-border);
    background-color: #ffffff;
    box-shadow: none;
}

html:not(.dark) .fi-input-wrp:focus-within {
    border-color: #405189;
    box-shadow: 0 0 0 3px rgba(64, 81, 137, 0.15);
}

/*
 * Gradyan yasağı — HEDEFLİ.
 *
 * Eskiden `.fi-body *` üzerinde `background-image: none !important`
 * vardı. Bu kural gradyanları temizlerken NATIVE SELECT OKUNU da
 * siliyordu: ok bir `background-image` SVG'sidir. Seçim kutuları düz
 * metin kutusu gibi görünüyor, tıklayınca liste açılıyordu (sahada
 * bildirildi). Ders: görsel bir dokuyu `*` üzerinden kapatmak, aynı
 * mekanizmayı kullanan işlevsel parçaları da kapatır.
 *
 * Artık yalnızca gradyan taşıyabilen yüzeyler hedefleniyor; form
 * denetimlerine dokunulmuyor.
 */
.fi-body .fi-btn,
.fi-body .fi-badge,
.fi-body .fi-section,
.fi-body .fi-topbar,
.fi-body .fi-sidebar,
.fi-body .fi-wi-stats-overview-stat {
    background-image: none;
}

/* ------------------------------------------------------------------
   Giriş ekranındaki sosyal giriş düğmeleri.

   Sınıf adları halka açık kayıt sayfasıyla ORTAK (`resources/views/
   auth/social-buttons.blade.php`); iki yerde aynı görünürler, stil iki
   yerde tanımlıdır çünkü panel kendi CSS'ini yükler.
   ------------------------------------------------------------------ */

.fi-simple-main .social-auth-sep {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0 1rem;
    font-size: 0.8125rem;
    color: rgb(var(--gray-500));
}

.fi-simple-main .social-auth-sep::before,
.fi-simple-main .social-auth-sep::after {
    content: '';
    flex: 1;
    border-top: 1px solid rgb(var(--gray-200));
}

.fi-simple-main .social-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
    padding: 0.625rem 1rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(var(--gray-800));
    background: #fff;
    border: 1px solid rgb(var(--gray-300));
    border-radius: 0.5rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.fi-simple-main .social-btn:hover { border-color: rgb(var(--gray-500)); }
.fi-simple-main .social-btn:disabled { opacity: 0.6; cursor: progress; }

.fi-simple-main .social-auth-error {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: rgb(var(--danger-600));
}

.fi-simple-main .fi-social-foot {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.875rem;
    color: rgb(var(--gray-500));
}

.fi-simple-main .fi-social-foot a {
    font-weight: 500;
    color: rgb(var(--primary-600));
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fi-dark .fi-simple-main .social-btn {
    color: rgb(var(--gray-100));
    background: rgb(var(--gray-900));
    border-color: rgb(var(--gray-700));
}