/**
 * Alpine.js x-cloak engelleme
 * Kütüphane yüklenene kadar öğeleri gizli tutar.
 */
[x-cloak] {
    display: none !important;
}

/** * İstersen spinner için küçük bir geçiş yumuşatması da ekleyebilirsin
 */
.bg-opacity-75 {
    backdrop-filter: blur(2px);
}

/* Icon spin utility (Remix Icons ile çalışır; fa-spin'in yerine geçer) */
@keyframes icon-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.icon-spin {
    display: inline-block;
    animation: icon-spin 1s linear infinite;
}

/* ── Sayfa rehberi (Plan 42) ─────────────────────────────────────────── */
.offcanvas.page-help { --vz-offcanvas-width: 420px; }
.page-help-steps li::marker { color: var(--vz-primary); font-weight: 600; }
.page-help-offer {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1035;
    width: min(380px, calc(100vw - 2rem));
    border: 1px solid var(--vz-border-color);
    animation: page-help-offer-in .25s ease-out;
}
@keyframes page-help-offer-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.shepherd-element.guide-step { max-width: 360px; border-radius: .5rem; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.guide-step .shepherd-header { padding: .75rem 1rem .25rem; background: transparent !important; }
.guide-step .shepherd-title { font-size: .95rem; font-weight: 600; color: var(--vz-heading-color, inherit); }
.guide-step .shepherd-text { padding: .25rem 1rem .75rem; font-size: .85rem; color: var(--vz-body-color); }
.guide-step .shepherd-footer { padding: 0 1rem .75rem; gap: .35rem; align-items: center; }
.guide-step .shepherd-button { margin: 0; }
.guide-step .guide-step-count { margin-right: auto; font-size: .75rem; color: var(--vz-secondary-color, #878a99); }
[data-bs-theme="dark"] .shepherd-element.guide-step { background: var(--vz-secondary-bg, #212529); }
.guide-step .shepherd-button.btn-light { background: var(--vz-light, #f3f6f9) !important; color: var(--vz-body-color) !important; }
.guide-step .shepherd-button.btn-light:hover { background: var(--vz-border-color, #e9ebec) !important; }
.page-help-player .ratio-16x10 { --vz-aspect-ratio: 62.5%; --bs-aspect-ratio: 62.5%; }
/* Balon–hedef arası ok boşluğu (Shepherd 11'de offset yok; Velzon okunu -18px'e iter) */
.shepherd-element.guide-step[data-popper-placement^=bottom] { margin-top: 14px; }
.shepherd-element.guide-step[data-popper-placement^=top]    { margin-top: -14px; }
.shepherd-element.guide-step[data-popper-placement^=right]  { margin-left: 14px; }
.shepherd-element.guide-step[data-popper-placement^=left]   { margin-left: -14px; }
.shepherd-element.guide-step[data-popper-placement^=bottom] > .shepherd-arrow { top: -8px; }
.shepherd-element.guide-step[data-popper-placement^=top] > .shepherd-arrow    { bottom: -8px; }
/* Velzon oku remixicon "yukarı ok" glifi (yalnız altında yönüne göre çizilmiş) → diğer yönlerde döndür */
.shepherd-element.guide-step[data-popper-placement^=top] > .shepherd-arrow:before   { transform: rotate(180deg); }
.shepherd-element.guide-step[data-popper-placement^=right] > .shepherd-arrow        { left: -20px; }
.shepherd-element.guide-step[data-popper-placement^=right] > .shepherd-arrow:before { transform: rotate(-90deg); }
.shepherd-element.guide-step[data-popper-placement^=left] > .shepherd-arrow         { right: -20px; }
.shepherd-element.guide-step[data-popper-placement^=left] > .shepherd-arrow:before  { transform: rotate(90deg); }

/* ── h-100 kart alt boşluğu ──────────────────────────────────────────────
   Velzon .card'a margin-bottom (grid-gutter) verir; h-100 kart sütunun tam
   boyunu alınca bu boşluk sütunun DIŞINA taşar → son satırdaki kart footer'a
   yapışır. Boşluğu yükseklikten düşüp sütun içinde tut. mb-0'lı kart hariç. */
.row > [class*="col"] > .card.h-100:not(.mb-0) {
    height: calc(100% - var(--vz-grid-gutter-width)) !important;
}

/* ── Yan yana özet kartlarında eşit yükseklik ────────────────────────────
   Satırdaki kartlardan birinde açıklama satırı varsa (ör. "Tahmini · 307 iş
   günü…") yalnız o uzuyor, komşuları kısa kalıp düzensiz görünüyordu. Sütunda
   TEK kart (mb-0) varsa sütunu doldurur → satırdaki kartlar en uzunu kadar olur.
   Üst üste iki kart taşıyan sütun :only-child'a uymaz, dokunulmaz. */
.row > [class*="col"] > .card.mb-0:only-child {
    height: 100%;
}

/* ── Profil alt sekme çubuğu (gruplu sekme) ─────────────────────────────
   Çubuk profilin koyu kapak görselinin (profile-wid-bg) üstüne düşer: koyu
   yazı okunmaz, Velzon .nav-link:hover menü rengini (yeşil) verip yazıyı
   tamamen kaybettirir. Kart zemini + açık renk kuralları → her zeminde okunur. */
.profile-subnav {
    background-color: var(--vz-secondary-bg);
    border: 1px solid var(--vz-border-color);
    border-radius: var(--vz-border-radius);
    padding: 0 .5rem;
}
.profile-subnav .nav-link { color: var(--vz-body-color); }
.profile-subnav .nav-link:hover,
.profile-subnav .nav-link:focus { color: var(--vz-success); }

/* Yardım makalesi görselleri (shot: bağlantısı) — altyazı görselin hemen altında */
.help-article-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: .75rem 0 .25rem;
    border: 1px solid var(--vz-border-color);
    border-radius: .375rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}
.help-article-body img + em {
    display: block;
    margin-bottom: 1rem;
    color: var(--vz-secondary-color);
    font-size: .8125rem;
}

/* ── Pano gün ızgarası (livewire.partials.dash-grid) ─────────────────────
   Puantaj Föyü ile aynı görünüm (table-bordered/sm, .8rem, harf hücresi); ilk sütun ve başlık kaydırmada sabit. */
.dash-grid-scroll { max-height: 70vh; }
.dash-grid-table { font-size: .8rem; }
.dash-grid-table thead th { position: sticky; top: 0; z-index: 3; min-width: 30px; }
.dash-grid-table .dash-grid-label {
    position: sticky; left: 0; z-index: 2; min-width: 200px; max-width: 16rem; text-align: left;
    background: var(--vz-secondary-bg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-grid-table thead .dash-grid-label { z-index: 4; }
.dash-grid-table .dash-grid-total { min-width: 40px; }
.dash-grid-table .dash-cell { padding: .35rem 0; line-height: 1.2; min-height: 1.6rem; font-weight: 600; }
/* Yıllık puantaj: kısa ay boşluğu, işyeri şeridi + geçiş çizgisi (durum renkleriyle çakışmayan mor), hücre tooltip'i */
.dash-grid-compact .dash-grid-label { min-width: 84px; max-width: 7rem; }
.dash-grid-compact .dash-grid-table thead th { min-width: 26px; }
.dash-grid-table .dash-void { background: repeating-linear-gradient(45deg, var(--vz-light), var(--vz-light) 3px, var(--vz-secondary-bg) 3px, var(--vz-secondary-bg) 6px); }
.dash-grid-table td[data-tip] { position: relative; cursor: default; }
.dash-grid-table .dash-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #6f42c1; pointer-events: none; }
.dash-grid-table .dash-change::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #6f42c1; pointer-events: none; }
.dash-legend-band { box-shadow: inset 0 -3px 0 #6f42c1; }
.dash-tip .tooltip-inner { white-space: pre-line; text-align: left; max-width: 320px; }
.dash-legend {
    display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem;
    border-radius: 3px; font-size: .7rem; font-weight: 600;
}

/* Pano gösterge kartı sütunu: içerik (uzun tutar, karşılaştırma yazısı) sütunu genişletip son kartı alta itmesin. */
.dash-kpi-col { min-width: 0; }

/* ── Telefon düzeni ──────────────────────────────────────────────────────
   Sınır Velzon'un çekmece sınırıyla aynı (767.98 px). Masaüstünü etkileyen kural bu bloğun dışında yazılmaz;
   dışarıdaki tek istisna .dt-cell-value (masaüstünde düzene girmez) ve yuvarlak avatarın oranı. */
.dt-cell-value { display: contents; }
.profile-cover-head .avatar-lg img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 767.98px) {
    /* iOS 16 px altındaki kutuda odaklanınca sayfayı yakınlaştırır. */
    .form-control, .form-select { font-size: 16px; }

    /* Çekmece: açıkken sayfa arkada kaymasın; iOS, tıklanabilir görünmeyen öğede document'e tıklama olayı göndermez. */
    body.vertical-sidebar-enable { overflow: hidden; }
    .vertical-overlay { cursor: pointer; }
    :is([data-layout="vertical"], [data-layout="semibox"]) .app-menu { height: 100dvh; bottom: auto; }
    /* İki sütunlu tercihte menü sunucudan simplebar'sız gelir (telefonda dikey çizilir). */
    #scrollbar:not([data-simplebar]) { height: 100%; overflow-y: auto; }

    /* Sarılabilir satır ekrandan geniş olmasın: flex-shrink-0 ile en geniş halinde kalıp hiç sarılmıyordu. */
    .page-content .d-flex.flex-wrap { min-width: 0; max-width: 100%; flex-shrink: 1; }
    /* Sayfa başlığı + sağındaki düğmeler */
    .page-title-box.d-flex, .page-title-box .d-flex { flex-wrap: wrap; row-gap: .5rem; }

    /* Liste başlığı */
    .dt-header-title { flex-basis: 100%; }
    .dt-header-actions { margin-left: auto; }

    /* Liste araçları: arama tam satır, filtreler düğmeyle açılır */
    .dt-toolbar { gap: .5rem !important; }
    .dt-search { max-width: none !important; }
    .dt-sort { width: auto; min-width: 0; }
    .dt-sort .form-select { min-width: 0; }
    .dt-filters { width: 100%; }
    .dt-filters-state:not(:checked) ~ .dt-filters { display: none !important; }
    .dt-filters .filter-item { flex: 1 1 calc(50% - .5rem); min-width: 0; }
    .dt-filters .filter-item .form-select,
    .dt-filters .filter-item .dropdown > .btn { width: 100%; }
    .dt-filters .filter-item .dropdown > .btn { justify-content: space-between; }

    /* Liste satırı = kart. Yalnız listenin kendi hücreleri: satır detayındaki iç tablo tablo kalır. */
    .datatable-responsive { min-height: 0; overflow: visible; }
    .dt-stack, .dt-stack > tbody { display: block; width: 100%; }
    .dt-stack > thead { display: none; }
    .dt-stack > tbody > tr {
        display: flex; flex-wrap: wrap; align-items: center;
        margin-bottom: .75rem; padding: .35rem 0;
        background-color: var(--vz-secondary-bg);
        border: 1px solid var(--vz-border-color); border-radius: .5rem;
    }
    .dt-stack > tbody > tr > td { display: flex; width: 100%; padding: .35rem .75rem; border: 0; background: transparent; box-shadow: none; }
    .dt-stack > tbody > tr > td[data-label] { justify-content: space-between; gap: .75rem; text-align: right !important; }
    .dt-stack > tbody > tr > td[data-label]::before {
        content: attr(data-label); flex: 0 0 38%; min-width: 0;
        text-align: left; font-size: .75rem; font-weight: 500; color: var(--vz-secondary-color);
    }
    .dt-stack > tbody > tr > td[data-label=""]::before { display: none; }
    /* Veritabanı numarası kartta yalnız yer kaplar. */
    .dt-stack > tbody > tr > td.dt-cell-id { display: none; }
    .dt-stack .dt-cell-value { display: block; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
    .dt-stack .dt-cell-value .badge { white-space: normal; }
    /* Seçim kutusu + detay oku kartın üstünde yan yana */
    .dt-stack > tbody > tr > .dt-cell-control { order: -1; width: auto; padding-right: 0 !important; }
    .dt-stack .dt-row-toggle { width: 32px !important; height: 32px !important; }
    /* İşlem düğmeleri kartın altında, parmakla basılabilir boyutta */
    .dt-stack > tbody > tr > .dt-cell-actions { justify-content: flex-end; margin-top: .25rem; padding-top: .5rem; border-top: 1px solid var(--vz-border-color); }
    .dt-stack .dt-cell-actions .btn-icon { width: 36px; height: 36px; }
    /* Açılan satır (kalemler / özet): üst kartına bitişik, geniş iç tablo kendi içinde kayar */
    .dt-stack > tbody > tr.datatable-row-detail { display: block; margin-top: -.5rem; }
    .dt-stack > tbody > tr.datatable-row-detail > td { display: block; overflow-x: auto; padding: .5rem .75rem !important; }

    .pagination { flex-wrap: wrap; }

    /* Özel ekranların (pano, rapor, çizelge) tablosu: kapsayıcısı yoksa sayfayı değil kendini kaydırsın. */
    .page-content div:has(> table:not(.dt-stack)),
    .page-content .gjs-editor { overflow-x: auto; }
    /* Kart başlığındaki başlık + düğme satırı sığmayınca alta iner. */
    .page-content .card-header.d-flex,
    .page-content .card-header > .d-flex { flex-wrap: wrap; row-gap: .5rem; }

    /* Profil: kapak görseli sabit yükseklikli ve içeriğin arkasında → başlık uzayınca sekmeler beyaz zemine düşüyor, kısa
       kalınca koyu kapağa. Telefonda kapak başlık bloğunun zemini olur; sekmeler hep sayfa zemininde. */
    .profile-foreground { display: none; }
    .profile-cover-head {
        margin: -1.5rem -1.5rem 1rem !important; padding: 1rem;
        background: linear-gradient(to top, var(--vz-primary-text-emphasis), var(--vz-primary));
    }
    .profile-cover-head .avatar-lg { width: 4rem; height: 4rem; }
    .profile-cover-head h3 { font-size: 1.15rem; }
    .profile-cover-head [data-tour="profile-actions"] { justify-content: flex-start !important; }
    .profile-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .profile-nav .nav-item { flex: 0 0 auto; }
    .profile-nav.nav-pills .nav-link { color: var(--vz-body-color); white-space: nowrap; }
    .profile-nav.nav-pills .nav-link.active { color: var(--vz-primary); font-weight: 600; }
    .profile-nav.nav-pills .nav-link:before { background-color: rgba(var(--vz-primary-rgb), .12); }
    .profile-subnav { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .profile-subnav .nav-item { flex: 0 0 auto; }
    .profile-subnav .nav-link { white-space: nowrap; }
}