/* ============================================================
   PTS — Kurumsal ERP Tasarım Sistemi (gradient + efekt katmanı)
   Renk/tipografi/radius MudTheme'den (PtsTheme.cs) gelir.
   Buraya YALNIZCA MudBlazor ile ifade edilemeyen şeyler yazılır:
   gradient'ler, hover efektleri, sol menü kimliği.
   Gradient kuralı (ölçülü): sadece sol menü, login, dashboard KPI.
   ============================================================ */

:root {
    --pts-radius-card: 16px;
    --pts-shadow-soft: 0 2px 8px rgba(15, 23, 42, .06);
    --pts-shadow-kpi: 0 6px 20px rgba(37, 99, 235, .18);
    --pts-ease: .18s ease;
}

body {
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Üst bar: beyaz zeminde ince alt çizgi (içerikle karışmasın) ---- */
.mud-appbar.mud-appbar-fixed-top {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* ============================================================
   SOL MENÜ — uygulamanın en güçlü görsel alanı (koyu lacivert ada)
   ============================================================ */
.pts-drawer .mud-drawer-content {
    background: linear-gradient(180deg, #0F172A 0%, #1E293B 100%);
    border-right: none;
}

/* Menü grupları arası ferahlık */
.pts-drawer .mud-nav-group,
.pts-drawer > .mud-navmenu > .mud-nav-link {
    margin: 2px 8px;
}

.pts-drawer .mud-navmenu {
    padding: 8px 0;
}

/* Link ve grup başlıkları: açık gri metin, yuvarlak köşe */
.pts-drawer .mud-nav-link,
.pts-drawer .mud-nav-group .mud-nav-link.mud-nav-group-header {
    color: #CBD5E1 !important;
    border-radius: 10px;
    transition: background-color var(--pts-ease), color var(--pts-ease);
}

.pts-drawer .mud-nav-link .mud-icon-root,
.pts-drawer .mud-nav-group .mud-nav-link .mud-icon-root {
    color: #94A3B8;
    transition: color var(--pts-ease);
}

/* Hover: hafif mavi tint */
.pts-drawer .mud-nav-link:hover {
    background-color: rgba(37, 99, 235, .18) !important;
    color: #FFFFFF !important;
}

.pts-drawer .mud-nav-link:hover .mud-icon-root {
    color: #FFFFFF;
}

/* Aktif menü: mavi gradient + beyaz + hafif glow */
.pts-drawer .mud-nav-link.active {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .45);
}

.pts-drawer .mud-nav-link.active .mud-icon-root {
    color: #FFFFFF;
}

.pts-drawer .mud-nav-group .mud-nav-link.mud-nav-group-header:hover {
    background-color: rgba(148, 163, 184, .12) !important;
    color: #FFFFFF !important;
}

/* ---- Modül rayı (sol dikey ikon şeridi) + panel yerleşimi ---- */
.pts-nav {
    display: flex;
    height: 100%;
    min-height: 0;
}

.pts-nav-panel {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Geliştirici bilgisi — menünün en altına yaslanır (BydySoft / bydysoft.com) */
.pts-dev-credit {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 12px 20px;
    text-decoration: none;
    opacity: .65;
    transition: opacity .15s ease;
}

.pts-dev-credit:hover {
    opacity: 1;
}

.pts-dev-credit-label {
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.pts-dev-credit-logo {
    height: 26px;
    width: auto;
    display: block;
}

/* Ray yalnızca 2+ modül varken çıkar */
.pts-rail {
    flex: 0 0 66px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 6px;
    background: rgba(0, 0, 0, .28);
    border-right: 1px solid rgba(255, 255, 255, .06);
}

.pts-rail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 2px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #94A3B8;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background-color var(--pts-ease), color var(--pts-ease), box-shadow var(--pts-ease);
}

.pts-rail-item .mud-icon-root {
    font-size: 1.45rem;
    color: inherit;
}

.pts-rail-item:hover {
    background: rgba(37, 99, 235, .18);
    color: #FFFFFF;
}

.pts-rail-item.active {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .45);
}

/* Açık çalışma alanının adı — menünün tepesinde. Raydaki 10 px'lik etiket tek başına
   görülmüyordu; kullanıcı hangi modülün menüsüne baktığını anlayamıyordu. */
.pts-nav-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 10px;
    color: #FFFFFF;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .01em;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.pts-nav-title .mud-icon-root {
    color: #60A5FA;
}

/* Menü satırı: bağlantı + favori yıldızı. Yıldız HER ZAMAN soluk görünür: yalnız üzerine gelince
   çıkan yıldız dokunmatik ekranda hiç görünmüyor, farede de keşfedilmiyordu (kullanıcı geri
   bildirimi 21.09.2026). Gürültü yapmasın diye dinlenirken soluk, satıra gelince belirgindir. */
.pts-nav-row {
    position: relative;
    display: flex;
    align-items: center;
}

.pts-nav-row > .mud-nav-item {
    flex: 1 1 auto;
    min-width: 0;
}

/* Yıldızlı satırda uzun ekran adı yıldızın altına girmesin. (!important: MudBlazor grup içindeki
   bağlantının sağ boşluğunu daha özgül bir seçiciyle sıfırlıyor.) */
.pts-nav-row--star .mud-nav-link {
    padding-inline-end: 46px !important;
}

/* ⚠ Dikey ortalama AÇIKÇA yazılır (top + translate). Düğme MudTooltip'in sıfır yükseklikli
   sarmalayıcısının içindedir; `top` verilmezse o sarmalayıcının tepesinden (= satırın ortasından)
   aşağı sarkar: 15 px kayar, alt yarısı sonraki satırın altında kalır ve tıklanamaz. */
.pts-nav-star {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, .32);
    cursor: pointer;
    transition: color var(--pts-ease), background-color var(--pts-ease), transform var(--pts-ease);
}

.pts-nav-star .mud-icon-root {
    font-size: 1.35rem;
}

.pts-nav-row:hover .pts-nav-star,
.pts-nav-star:focus-visible {
    color: rgba(255, 255, 255, .9);
}

.pts-nav-star.on,
.pts-nav-row:hover .pts-nav-star.on {
    color: #FBBF24;
}

.pts-nav-star:hover,
.pts-nav-row:hover .pts-nav-star:hover {
    background: rgba(251, 191, 36, .2);
    color: #FBBF24;
}

.pts-nav-star:active {
    transform: translateY(-50%) scale(.9);
}

.pts-nav-star:focus-visible {
    outline: 2px solid #FBBF24;
    outline-offset: -2px;
}

.pts-nav-sep {
    border-color: rgba(255, 255, 255, .08) !important;
    margin: 8px 12px;
}

/* Menü içi bölüm başlığı (Ayarlar rayında "Firmam" / "Platform").
   Tıklanabilir görünmemeli: link değil, ayırıcı bir etikettir. */
.pts-nav-caption {
    display: block;
    padding: 10px 16px 4px;
    color: rgba(255, 255, 255, .45) !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .68rem;
    font-weight: 600;
}

/* ============================================================
   KPI / ÖZET KARTLARI — gradient (yalnızca dashboard)
   ============================================================ */
.pts-kpi {
    position: relative;
    border-radius: var(--pts-radius-card);
    padding: 20px;
    color: #FFFFFF;
    overflow: hidden;
    min-height: 118px;
    box-shadow: var(--pts-shadow-kpi);
    transition: transform var(--pts-ease), box-shadow var(--pts-ease);
    cursor: pointer;
    height: 100%;
}

.pts-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(37, 99, 235, .26);
}

/* Panel kısayol kartı (Ayarlar paneli) — sayısı olmayan ekranlara giden kart. */
.pts-shortcut {
    cursor: pointer;
    height: 100%;
    transition: border-color var(--pts-ease), box-shadow var(--pts-ease), transform var(--pts-ease);
}

.pts-shortcut:hover {
    transform: translateY(-2px);
    border-color: var(--mud-palette-primary);
    box-shadow: var(--pts-shadow-kpi);
}

/* Tıklanmayan kart tıklanabilir görünmemeli: "bastım bir şey olmadı" en sinir bozucu geri bildirimdir.
   Eski ekranlar (Stok, Ürünler) sınıfı yazmadan kart çizdiği için VARSAYILAN tıklanabilir kalır;
   KpiCard bileşeni Href yoksa .pts-kpi--static ekler. */
.pts-kpi--static {
    cursor: default;
}

.pts-kpi--static:hover {
    transform: none;
    box-shadow: var(--pts-shadow-kpi);
}

.pts-kpi .pts-kpi-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    opacity: .28;
    font-size: 3.2rem;
    line-height: 1;
}

.pts-kpi .pts-kpi-label {
    font-size: .8rem;
    font-weight: 500;
    opacity: .92;
    letter-spacing: .2px;
}

.pts-kpi .pts-kpi-value {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.15;
    margin-top: 4px;
}

.pts-kpi .pts-kpi-caption {
    font-size: .72rem;
    opacity: .85;
    margin-top: 2px;
}

/* Gradient varyantları (spec renkleri) */
.pts-kpi-blue   { background: linear-gradient(135deg, #2563EB 0%, #60A5FA 100%); }
.pts-kpi-green  { background: linear-gradient(135deg, #16A34A 0%, #4ADE80 100%); }
.pts-kpi-amber  { background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%); }
.pts-kpi-red    { background: linear-gradient(135deg, #DC2626 0%, #F87171 100%); }
.pts-kpi-violet { background: linear-gradient(135deg, #7C3AED 0%, #A855F7 100%); }
.pts-kpi-cyan   { background: linear-gradient(135deg, #0891B2 0%, #06B6D4 100%); }

/* ============================================================
   SAYFA BAŞLIĞI (PageHeader) — DÜZ beyaz panel + renkli ikon avatar
   (ERP ciddiyeti için header'da gradient YOK)
   ============================================================ */
.pts-page-header {
    border-radius: var(--pts-radius-card);
    box-shadow: var(--pts-shadow-soft) !important;
}

.pts-page-header .pts-header-avatar {
    box-shadow: 0 4px 12px rgba(37, 99, 235, .28);
}

/* ============================================================
   KART HOVER — genel kalkma efekti (opt-in .pts-hover)
   ============================================================ */
.pts-hover {
    transition: transform var(--pts-ease), box-shadow var(--pts-ease);
}

.pts-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .10);
}

/* Butonlarda hafif basınç hissi */
.mud-button-root:active {
    transform: scale(.99);
}

/* ============================================================
   LOGIN — gradient arka plan (yalnızca giriş sayfası)
   ============================================================ */
.pts-login-bg {
    min-height: 100vh;
    background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 55%, #2563EB 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}


/* ============================================================
   KASA MODÜLÜ — MOBİL (yalnız .pts-cash-page ve .pts-header-actions)

   Kasa modülü ağırlıkla telefondan kullanılıyor. Buradaki kurallar KASITLI olarak
   iki sınıfla sınırlıdır; projenin tamamına dokunulmaz (diğer modüller masaüstü
   yoğunluğunda kalsın istendi). Yeni bir ekranı bu davranışa dahil etmek için
   kökteki MudStack'e "pts-cash-page", PageHeader'a StackActionsOnMobile="true".
   ============================================================ */

/* Başlık aksiyonları alt satıra indiğinde tam genişlik ve eşit paylaşımlı olsun:
   "Gelir Ekle / Gider Ekle / Transfer" üçlüsü 390 px'de başlığın yanına sığmıyordu. */
@media (max-width: 599.98px) {
    .pts-header-actions {
        width: 100%;
    }

    .pts-header-actions > .mud-stack {
        width: 100%;
    }

    .pts-header-actions .mud-button-root {
        flex: 1 1 0;
        min-width: 0;
    }

    /* Panel iç boşlukları: 16px → 12px. Dar ekranda içerik genişliği ~310 px'e
       düşüyordu; 8 px geri kazanmak tutar sütunlarının kırpılmasını önlüyor. */
    .pts-cash-page .mud-paper.pa-4 {
        padding: 12px !important;
    }

    /* Dokunma hedefi: kasa ekranlarındaki satır aksiyonları parmakla kullanılabilir
       olmalı (varsayılan küçük ikon butonu ~30 px). */
    .pts-cash-page .mud-table-cell .mud-icon-button,
    .pts-cash-page .mud-list-item .mud-icon-button {
        min-width: 40px;
        min-height: 40px;
    }
}


/* ------------------------------------------------------------
   KASA MOBİL — KART LİSTESİ + FAB (P2)
   Tablo yerine kart: 13 alanlı yığılmış satır tek hareketi bir ekran boyuna
   çıkarıyordu. MudTable yapısı korunur (ServerData + sayfalama + boş durum),
   yalnız satırın GÖRÜNÜMÜ değişir.
   ------------------------------------------------------------ */
.pts-cash-cards .mud-table-row {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pts-cash-cards .mud-table-cell.pts-cash-card-cell {
    padding: 10px 12px;
    border-bottom: none;
    cursor: pointer;
}

.pts-cash-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

/* Açıklama tek satırda kalsın: kart yüksekliğinin öngörülebilir olması,
   listeyi kaydırırken göz taramasını hızlandırır. */
.pts-cash-card-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sağ alt köşede yüzen eylem düğmesi. iOS'ta alt çubuk için güvenli alan payı. */
.pts-cash-fab {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 1200;
}

@media (max-width: 599.98px) {
    .pts-hide-mobile {
        display: none !important;
    }
}

/* Alt sayfa (bottom sheet) eylem düğmeleri: dokunma hedefi en az 44 px.
   MudBlazor varsayılanı 37 px'de kalıyordu; iptal gibi geri alınamaz bir işlemin
   yanlışlıkla tetiklenmemesi için burada boy şart. */
.pts-sheet-action {
    min-height: 44px;
    justify-content: flex-start;
}

/* ---------------------------------------------------------------------------
   RENK KUTUCUĞU (ColorField, renk paleti, seçenek değeri)
   Renk metin değil GÖRSEL bilgidir: kullanıcı "Lacivert"i okuyarak değil görerek seçer.
   Beyaz/açık renk beyaz zeminde kaybolmasın diye kenarlık DAİMA vardır.
   --------------------------------------------------------------------------- */
.pts-swatch {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .18);
    padding: 0;
    cursor: pointer;
    flex: 0 0 auto;
    vertical-align: middle;
}
.pts-swatch.sm { width: 16px; height: 16px; cursor: default; }
.pts-swatch.lg { width: 40px; height: 40px; border-radius: 10px; }
.pts-swatch.on { box-shadow: 0 0 0 2px var(--mud-palette-surface), 0 0 0 4px var(--mud-palette-primary); }
.pts-swatch:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
/* Renk kodu olmayan (palette bulunmayan) değer: çizgili boş kutucuk. */
.pts-swatch.none {
    background: repeating-linear-gradient(45deg, transparent 0 4px, rgba(0, 0, 0, .12) 4px 6px);
}
.pts-swatch-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Logo önizlemesi: saydam PNG'nin kenarları görünsün diye dama deseni zemin. */
.pts-logo-preview {
    width: 88px;
    height: 88px;
    border-radius: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    object-fit: contain;
    background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 16px 16px;
}

/* Kapak fotoğrafı önizlemesi: yatay şerit oranı (mağazada geniş görünür). */
.pts-cover-preview {
    width: 176px; height: 88px; border-radius: 12px; object-fit: cover;
    border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-background-gray);
}

/* Mağaza görünümü seçimi (StorefrontDialog): iki büyük kart, küçük çizimle düzeni gösterir. */
.pts-layout-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.pts-layout-choice {
    display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; text-align: left;
    padding: 12px; border-radius: 12px; cursor: pointer; font: inherit; color: inherit;
    border: 1.5px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface);
}
.pts-layout-choice.on { border-color: var(--mud-palette-primary); box-shadow: inset 0 0 0 1px var(--mud-palette-primary); }
.pts-layout-choice:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.pts-layout-choice b { display: block; font-size: 15px; }
.pts-layout-choice span { font-size: 13px; color: var(--mud-palette-text-secondary); }
.pts-layout-thumb {
    width: 72px; height: 94px; border-radius: 8px; padding: 6px; display: grid; gap: 4px;
    background: #fff; border: 1px solid #dfe3e8;
}
.pts-layout-thumb.grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
.pts-layout-thumb.grid i { background: linear-gradient(160deg, #d9dde3, #b8c0ca); border-radius: 3px; }
.pts-layout-thumb.rows { grid-auto-rows: 1fr; }
.pts-layout-thumb.rows i { display: grid; grid-template-columns: 1fr 22px; gap: 4px; }
.pts-layout-thumb.rows i::before { content: ""; background: repeating-linear-gradient(#c9cfd6 0 3px, transparent 3px 6px); }
.pts-layout-thumb.rows i::after { content: ""; background: linear-gradient(160deg, #e7b98a, #b86b3b); border-radius: 3px; }

/* =============================================================================
   Ekran içi tanıtım turu (TourOverlay) — docs/UI-STANDARD.md "Tanıtım turu".
   Katman DÖRT panelden oluşur: anlatılan öğenin çevresini bulanıklaştırır, öğenin kendisi net kalır.
   Tek panel + büyük gölge yapılsaydı arka plan yalnızca kararırdı, bulanıklaşmazdı.
   ============================================================================= */
.pts-tour {
    position: fixed;
    inset: 0;
    z-index: 2000; /* MudBlazor drawer/appbar üstünde, diyalogların (3000+) altında */
    outline: none;
}

.pts-tour-veil {
    position: fixed;
    background: rgba(17, 24, 39, .45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* Anlatılan öğenin çerçevesi. Delik gerçekten boştur: öğe kendi rengiyle, net görünür. */
.pts-tour-ring {
    position: fixed;
    border: 2px solid var(--mud-palette-primary);
    border-radius: 10px;
    box-shadow: 0 0 0 4px rgba(var(--mud-palette-primary-rgb), .25);
    pointer-events: none;
    transition: top .15s ease, left .15s ease, width .15s ease, height .15s ease;
}

.pts-tour-bubble {
    position: fixed;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
    padding: 12px 14px;
    max-width: calc(100vw - 32px);
}

.pts-tour-bubble-head { margin-bottom: 6px; }
.pts-tour-bubble-text { line-height: 1.5; }
.pts-tour-bubble-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
}