/* Marka renkleri (WorkboxB2B logosu). Sayfalarda sabit renk kodu yerine bu sınıflar kullanılır;
   renk değişecekse (ör. koyu tema) yalnız buradaki değişkenler değiştirilir. */
:root {
    --wb-brand-purple: #3c0772;
    --wb-brand-green: #009247;
}

/* Menüde üst seviye öğe ikonları mor, alt menü öğeleri yeşil. */
.icon-brand-purple { color: var(--wb-brand-purple); }
.icon-brand-green { color: var(--wb-brand-green); }

/* Mor zemin üzerinde beyaz içerik (üst çubuktaki profil avatarı). */
.bg-brand-purple { background-color: var(--wb-brand-purple); color: #fff; }

/* Koyu tema: aynı renklerin açık tonları (koyu zeminde kontrast ~6:1). */
[data-layout-mode=dark] {
    --wb-brand-purple: #b39ddb;
    --wb-brand-green: #2fbf71;
}
/* Avatar: açık morda beyaz simge okunmaz, koyu mor zeminde kaybolur; orta ton. */
[data-layout-mode=dark] .bg-brand-purple { background-color: #7b4fc4; }

/* Logo: MerchantSettings:DarkLogoPath doluysa koyu temada beyaz logo gösterilir (_logo.cshtml). */
.wb-logo-dark { display: none; }
[data-layout-mode=dark] .wb-logo-dark { display: inline; }
[data-layout-mode=dark] .wb-logo-default.wb-has-dark { display: none; }

/* Abonelik son kullanım alanı (_sidebar.cshtml): yatay menü şeridinin sağ ucu, üst çubuktaki kullanıcı kutusunun
   altında. Mor zeminli kullanıcı kutusundan ayrışsın diye açık yeşil zemin ve yeşil ikon.
   Sağ kenar ve genişlik kullanıcı kutusuna script ile eşitlenir (_sidebar.cshtml). */
.wb-subscription-item {
    margin-left: auto;
    align-self: stretch;
    padding: 0 1rem;
    background-color: rgba(0,146,71,.08);
    white-space: nowrap;
}
.wb-subscription-icon { font-size: 20px; line-height: 1; color: var(--wb-brand-green); }
.wb-subscription-date { font-size: 13px; margin-top: 2px; }
.wb-subscription-days { color: var(--vz-secondary-color, #878a99); }
.wb-subscription-item.is-warning .wb-subscription-icon,
.wb-subscription-item.is-warning .wb-subscription-days { color: #f7b84b; }
.wb-subscription-item.is-expired .wb-subscription-icon,
.wb-subscription-item.is-expired .wb-subscription-days { color: #f06548; }
/* Yatay menüde ekrana sığmayan alt menü içeri çevrilir (js/custom-menu.js): üst seviyede menü öğesinin sağ kenarına
   hizalanır, iç içe alt menü (More > Raporlar gibi) sola açılır. app.js'in dropdown-custom-right sınıfını da ezer. */
@media (min-width: 1024.1px) {
    [data-layout=horizontal] #navbar-nav > .nav-item > .menu-dropdown.wb-dropdown-flip {
        left: auto !important;
        right: 0 !important;
    }
    [data-layout=horizontal] .menu-dropdown .menu-dropdown.wb-dropdown-flip {
        left: auto !important;
        right: 100% !important;
    }
}

/* 1024px altında menü hamburger listesine dönüşüyor; orada gösterilmez. */
@media (max-width: 1024.98px) {
    .wb-subscription-item { display: none !important; }
}

/* Kullanıcı avatarındaki baş harfler (Views/Shared/_UserAvatar) içerik olarak değil CSS ile yazılır:
   tablo araması ve Excel/PDF aktarımı hücre metnini kullandığı için "AY Ahmet Yılmaz" gibi görünmesin. */
.wb-avatar-initials::before { content: attr(data-initials); }

/* Telefon (768px altı). Tema bu genişlikte üst çubuktaki logoyu gizliyordu, ana sayfaya dönüş yolu kalmıyordu.
   Logo, menü ikonunun hemen sağında gösterilir (geniş ekranda solunda). */
@media (max-width: 767.98px) {
    .wb-topbar-start {
        min-width: 0;
        align-items: center;
    }
    .wb-topbar-start .navbar-brand-box {
        display: flex !important;
        order: 2;
        min-width: 0;
        padding: 0 !important;
    }
    .wb-topbar-start .topnav-hamburger { order: 1; }
    .wb-topbar-start .logo { display: flex; align-items: center; line-height: 1; }
    .wb-topbar-start .logo img {
        max-height: 40px;
        max-width: 30vw; /* sağdaki arama, zil ve profil ikonlarına yer kalsın (360px ekranda ~108px) */
        width: auto;
        height: auto;
    }

    /* Alt bilgi: tema yüksekliği 60px'e sabitleyip içeriğin altına mutlak konumluyordu; telefonda yazılar 4 satıra
       çıkınca taşıyordu. Burada akışta durur, yüksekliği içeriğe göre uzar; kısa sayfada yine en altta kalır. */
    .main-content {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    [data-layout] .page-content {
        flex: 1 0 auto;
        padding-bottom: 1rem;
    }
    .footer {
        position: static;
        height: auto;
        padding: 12px 16px;
        font-size: 12px;
        line-height: 1.6;
        text-align: center;
    }
    .footer .text-sm-end { margin-top: 4px; }
}