/*
    HRBCore İntranet — kabuk ve tasarım dili.

    AMAÇ: ERP (HRBCore_Net10) ile AYNI ÜRÜNÜN parçası gibi görünmek, ama telefonda
    hızlı kalmak. Bunun için ERP'nin site.css'i (1,17 MB) kopyalanmadı; onun yerine
    TASARIM DEĞERLERİ buraya taşındı:

        Yazı tipi ....... Montserrat            (ERP: site.css @import, Google Fonts)
        Birincil renk ... #0074ba               (ERP: data-color-theme="Blue_Theme")
        İkincil renk .... #47d7bc
        Gövde zemini .... #f4f6f9               (ERP: --bs-body-bg, light tema)
        Köşe ............ 8px                   (ERP'de baskın yarıçap)
        Kart gölgesi .... rgba(145,158,171,…)   (ERP: --bs-card-box-shadow)

    NEDEN DEĞİŞKEN YETMİYOR: Bootstrap'in .btn-primary, .badge, .form-control:focus
    gibi bileşenleri derleme anında SABİT renklerle üretilir; yalnızca --bs-primary
    değişkenini ezmek onları boyamaz. Bu yüzden aşağıda ilgili bileşenler tek tek
    ezilir — ERP'nin teması da aynısını yapıyor.
*/

/* ============================================================================
   1. TASARIM DEĞERLERİ
   ========================================================================== */
:root {
    --hrb-primary: #0074ba;
    --hrb-primary-koyu: #00639e;
    --hrb-primary-soluk: rgba(0, 116, 186, .1);
    --hrb-ikincil: #47d7bc;

    --hrb-govde-zemin: #f4f6f9;
    --hrb-kart-zemin: #ffffff;
    --hrb-kenarlik: #e5eaef;
    --hrb-metin: #2a3547;
    --hrb-metin-soluk: #7c8fac;

    --hrb-kose: 8px;
    --hrb-kose-buyuk: 12px;
    --hrb-golge: rgba(145, 158, 171, .3) 0 0 2px 0, rgba(145, 158, 171, .12) 0 12px 24px -4px;

    --hrb-ust-yukseklik: 58px;
    --hrb-alt-yukseklik: 62px;

    /* Bootstrap'in kendi değişkenleri de hizalanır: bileşenlerin bir kısmı bunları okur. */
    --bs-primary: #0074ba;
    --bs-primary-rgb: 0, 116, 186;
    --bs-body-bg: #f4f6f9;
    --bs-body-color: #2a3547;
    --bs-border-radius: 8px;
    --bs-link-color: #0074ba;
    --bs-link-hover-color: #00639e;
}

/* ============================================================================
   2. TİPOGRAFİ
   Montserrat, ERP ile aynı kaynaktan (Google Fonts) gelir. Erişilemezse yedek
   yığın devreye girer — sayfa yazısız kalmaz, yalnızca yazı tipi değişir.
   ========================================================================== */
body,
.hrb-govde {
    font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    color: var(--hrb-metin);
    background: var(--hrb-govde-zemin);
    margin: 0;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: none;
}

h1, h2, h3, h4, h5, h6,
.fw-semibold { font-weight: 600; }

.text-muted { color: var(--hrb-metin-soluk) !important; }

/* ============================================================================
   3. BOOTSTRAP BİLEŞEN EZMELERİ (ERP rengine hizalama)
   ========================================================================== */
.btn-primary {
    --bs-btn-bg: var(--hrb-primary);
    --bs-btn-border-color: var(--hrb-primary);
    --bs-btn-hover-bg: var(--hrb-primary-koyu);
    --bs-btn-hover-border-color: var(--hrb-primary-koyu);
    --bs-btn-active-bg: var(--hrb-primary-koyu);
    --bs-btn-active-border-color: var(--hrb-primary-koyu);
    --bs-btn-disabled-bg: var(--hrb-primary);
    --bs-btn-disabled-border-color: var(--hrb-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--hrb-primary);
    --bs-btn-border-color: var(--hrb-primary);
    --bs-btn-hover-bg: var(--hrb-primary);
    --bs-btn-hover-border-color: var(--hrb-primary);
    --bs-btn-active-bg: var(--hrb-primary);
    --bs-btn-active-border-color: var(--hrb-primary);
}

.btn { border-radius: var(--hrb-kose); font-weight: 500; }

.text-primary { color: var(--hrb-primary) !important; }
.bg-primary { background-color: var(--hrb-primary) !important; }
.border-primary { border-color: var(--hrb-primary) !important; }
.bg-primary-subtle { background-color: var(--hrb-primary-soluk) !important; }

a { color: var(--hrb-primary); }
a:hover { color: var(--hrb-primary-koyu); }

.form-control, .form-select {
    border-radius: var(--hrb-kose);
    border-color: var(--hrb-kenarlik);
}

.form-control:focus, .form-select:focus {
    border-color: var(--hrb-primary);
    /* ERP'nin odak halkası yumuşaktır; Bootstrap'in mavi halkası ürüne yabancı durur. */
    box-shadow: 0 0 0 .2rem var(--hrb-primary-soluk);
}

.form-check-input:checked {
    background-color: var(--hrb-primary);
    border-color: var(--hrb-primary);
}

.form-check-input:focus {
    border-color: var(--hrb-primary);
    box-shadow: 0 0 0 .2rem var(--hrb-primary-soluk);
}

/* ============================================================================
   4. KART DİLİ (ERP'nin kart görünümü)
   ========================================================================== */
.card {
    border: 0;
    border-radius: var(--hrb-kose-buyuk);
    background: var(--hrb-kart-zemin);
    box-shadow: var(--hrb-golge);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--hrb-kenarlik);
    padding: 14px 16px;
    font-weight: 600;
}

/* ERP'de liste ve detay sayfalarının başlığı birincil renkli bir şerittir;
   portalda da bölüm başlıklarını aynı dile bağlıyoruz. */
.hrb-bolum-basligi {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--hrb-primary);
    color: #fff;
    border-radius: var(--hrb-kose-buyuk) var(--hrb-kose-buyuk) 0 0;
    padding: 12px 16px;
    font-weight: 600;
    font-size: .95rem;
}

.hrb-bolum-basligi i { opacity: .9; }

.list-group-item {
    border-color: var(--hrb-kenarlik);
    padding: 13px 16px;
}

.badge { border-radius: 6px; font-weight: 600; letter-spacing: .2px; }

.alert { border: 0; border-radius: var(--hrb-kose); box-shadow: var(--hrb-golge); }

/* ============================================================================
   5. ÜST ÇUBUK
   ========================================================================== */
.hrb-ust-cubuk {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--hrb-primary);
    color: #fff;
    /* Çentikli cihazlarda durum çubuğunun altına girmesin. */
    padding-top: env(safe-area-inset-top, 0px);
    box-shadow: 0 2px 8px rgba(0, 116, 186, .25);
}

.hrb-ust-icerik {
    height: var(--hrb-ust-yukseklik);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    max-width: 960px;
    margin: 0 auto;
}

.hrb-marka {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    min-width: 0;
}

.hrb-marka:hover { color: #fff; opacity: .92; }
.hrb-marka span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Logo ERP ayarlarından (GeneralSettings.Logo) gelir. Koyu zemin üzerinde
   duracağı için beyaz bir tabanın üstüne oturtulur: ayarda koyu renkli bir
   logo varsa üst çubukta kaybolmasın. */
.hrb-logo {
    height: 30px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
    padding: 3px 6px;
}

.hrb-kullanici-btn {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    border: 0;
    border-radius: 20px;
    padding: 5px 12px;
    font-weight: 500;
}

.hrb-kullanici-btn:hover,
.hrb-kullanici-btn:focus,
.hrb-kullanici-btn:active { background: rgba(255, 255, 255, .28); color: #fff; }

.dropdown-menu {
    border: 0;
    border-radius: var(--hrb-kose);
    box-shadow: var(--hrb-golge);
    padding: 6px;
}

.dropdown-item { border-radius: 6px; padding: 9px 12px; }
.dropdown-item:active { background: var(--hrb-primary); }

/* ============================================================================
   6. İÇERİK
   ========================================================================== */
.hrb-icerik {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px 14px;
    /* Alt sekme çubuğu içeriğin son satırını örtmesin. */
    padding-bottom: calc(var(--hrb-alt-yukseklik) + 18px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(14px + env(safe-area-inset-left, 0px));
    padding-right: calc(14px + env(safe-area-inset-right, 0px));
}

.hrb-sayfa-basligi {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 2px 0 14px;
    color: var(--hrb-metin);
}

/* ============================================================================
   7. ALT SEKME ÇUBUĞU
   ========================================================================== */
.hrb-alt-menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    background: #fff;
    border-top: 1px solid var(--hrb-kenarlik);
    box-shadow: 0 -2px 12px rgba(145, 158, 171, .12);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.hrb-sekme {
    flex: 1 1 0;
    /* 62px yükseklik + tam genişlik: parmakla ıskalanmayacak bir hedef.
       44px altındaki dokunma hedefleri telefonda sürekli yanlış tıklanır. */
    height: var(--hrb-alt-yukseklik);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
    color: var(--hrb-metin-soluk);
    font-size: .72rem;
    font-weight: 500;
    line-height: 1;
    position: relative;
}

.hrb-sekme i { font-size: 1.1rem; }

.hrb-sekme.aktif { color: var(--hrb-primary); font-weight: 600; }

/* Aktif sekmenin üstündeki ince şerit: hangi sekmede olduğunu renk körü
   kullanıcılar da yalnızca renge bakmadan ayırt edebilsin. */
.hrb-sekme.aktif::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22%;
    right: 22%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--hrb-primary);
}

.hrb-sekme:active { background: var(--hrb-primary-soluk); }

/* ============================================================================
   8. ÖZET KUTULARI
   ========================================================================== */
.hrb-ozet-kart {
    background: var(--hrb-kart-zemin);
    border-radius: var(--hrb-kose-buyuk);
    box-shadow: var(--hrb-golge);
    padding: 14px 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hrb-ozet-etiket {
    font-size: .74rem;
    font-weight: 500;
    color: var(--hrb-metin-soluk);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.hrb-ozet-deger {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--hrb-metin);
}

.hrb-avatar {
    border-radius: 50%;
    background: var(--hrb-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}

.hrb-avatar-soluk {
    background: var(--hrb-primary-soluk);
    color: var(--hrb-primary);
}

/* ============================================================================
   9. GİRİŞ EKRANI
   ========================================================================== */
.hrb-giris-govde {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    /* Adres çubuğu gizlenip açıldığında 100vh zıplar; dvh destekleyen tarayıcıda düzelir. */
    min-height: 100dvh;
    padding: 20px;
    background: linear-gradient(160deg, #eef4f9 0%, var(--hrb-govde-zemin) 55%);
}

.hrb-giris-kutu {
    width: 100%;
    max-width: 390px;
    background: #fff;
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: rgba(145, 158, 171, .28) 0 0 2px 0, rgba(145, 158, 171, .16) 0 16px 40px -8px;
}

.hrb-giris-logo {
    max-height: 54px;
    max-width: 190px;
    object-fit: contain;
}

.hrb-giris-logo-yedek {
    width: 62px;
    height: 62px;
    margin: 0 auto;
    border-radius: 16px;
    background: var(--hrb-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

/* 16px altı yazı tipi, iOS'ta alana odaklanınca sayfayı otomatik yakınlaştırır
   ve kullanıcı her seferinde kaydırmak zorunda kalır. */
.hrb-giris-kutu .form-control,
.hrb-giris-kutu .btn { font-size: 16px; }

.hrb-giris-kutu .form-control { padding: .62rem .8rem; }

/* ============================================================================
   10. GENİŞ EKRAN
   ========================================================================== */
@media (min-width: 768px) {
    .hrb-icerik {
        padding-top: 22px;
        padding-bottom: calc(var(--hrb-alt-yukseklik) + 26px);
    }

    .hrb-sekme { font-size: .78rem; }
    .hrb-ozet-deger { font-size: 1.6rem; }
}

/* ============================================================================
   11. YARDIMCI SINIFLAR
   ========================================================================== */

/* Flex kutusu içindeki metnin kısalabilmesi için gerekli. Bootstrap'te bu
   yardımcı YOKTUR; olmadan .text-truncate bir flex çocuğunda çalışmaz,
   uzun ad satırı taşırır ve düzeni bozar. */
.min-width-0 { min-width: 0; }

/* ============================================================================
   12. AVATAR (fotoğraf + baş harf yedeği)
   ========================================================================== */

/* Baş harf yuvarlağı her zaman çizilir, fotoğraf üstüne biner. Fotoğraf yüklenemezse
   img kendini kaldırır ve alttaki yuvarlak görünür — kırık görsel ikonu çıkmaz. */
.hrb-avatar-kutu {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    line-height: 0;
}

.hrb-avatar-gorsel {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
}

/* ============================================================================
   13. KUTLAMALAR
   ========================================================================== */
.hrb-bolum-basligi { flex-wrap: wrap; }

.hrb-donem-sekmeler {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, .18);
    border-radius: 20px;
    padding: 3px;
}

.hrb-donem-sekme {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: .74rem;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 16px;
    white-space: nowrap;
    line-height: 1.4;
}

.hrb-donem-sekme.aktif {
    background: #fff;
    color: var(--hrb-primary);
}

.hrb-kutlama-baslik {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--hrb-metin);
    margin-bottom: 8px;
}

.hrb-kutlama-bos {
    font-size: .82rem;
    color: var(--hrb-metin-soluk);
    background: var(--hrb-govde-zemin);
    border-radius: var(--hrb-kose);
    padding: 14px;
    text-align: center;
}

/* ── Şerit ──────────────────────────────────────────────────────────────── */
.hrb-serit-sarmal { position: relative; }

.hrb-serit {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;

    /* ÜSTTEKİ 14px KRİTİK — silmeyin.
       "BUGÜN" rozeti kartın üst kenarının 9px ÜSTÜNE taşar. CSS Overflow
       spesifikasyonuna göre bir eksen `visible` değilse diğeri de `visible`
       KALAMAZ: overflow-x: auto, overflow-y'yi de auto yapar. Yani yatay
       kaydırma açıldığı anda dikeyde de kırpma başlar ve rozetin üst yarısı
       kesilir. Rozeti kırpılmadan göstermenin yolu, şeride onu içine alacak
       kadar üst boşluk vermektir. */
    padding: 14px 2px 6px;

    /* Kaydırma çubuğu telefonda gereksiz yer kaplar; parmakla kaydırma zaten var. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hrb-serit::-webkit-scrollbar { display: none; }

.hrb-kutlama-kart {
    position: relative;
    flex: 0 0 auto;
    width: 118px;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid var(--hrb-kenarlik);
    border-radius: var(--hrb-kose-buyuk);
    padding: 14px 8px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* Bugün kutlaması olan kişi renkle DEĞİL, ayrıca bir rozetle de ayrılır:
   yalnızca renge dayanan bir ayrım renk körü kullanıcılar için görünmez olur. */
.hrb-kutlama-kart.bugun {
    border-color: var(--hrb-primary);
    box-shadow: 0 0 0 2px var(--hrb-primary-soluk);
}

.hrb-bugun-rozet {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--hrb-primary);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 2px 9px;
    border-radius: 10px;
    white-space: nowrap;
}

.hrb-kutlama-ad {
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--hrb-metin);
    /* En fazla iki satır; uzun adlar kartları farklı yükseklikte bırakmasın. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.1em;
}

.hrb-kutlama-alt { font-size: .72rem; color: var(--hrb-metin-soluk); }

.hrb-kutlama-yil {
    background: var(--hrb-primary-soluk);
    color: var(--hrb-primary);
    font-weight: 700;
    border-radius: 20px;
    padding: 2px 9px;
}

.hrb-kutlama-yeni {
    background: rgba(71, 215, 188, .18);
    color: #1f8f7c;
    font-weight: 700;
    border-radius: 20px;
    padding: 2px 9px;
}

.hrb-kutlama-departman {
    font-size: .66rem;
    color: var(--hrb-metin-soluk);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ── Oklar ──────────────────────────────────────────────────────────────── */
.hrb-serit-ok {
    /* Dokunmatik cihazda gizli: orada parmakla kaydırmak zaten doğal yol.
       Geniş ekranda (aşağıdaki medya sorgusu) görünür hâle gelir. */
    display: none;
    position: absolute;

    /* Şeridin üst (14px) ve alt (6px) boşluğu eşit değil; düz %50 oklar
       kartlara göre 4px yukarıda kalırdı. Fark kadar aşağı alınıyor. */
    top: calc(50% + 4px);
    transform: translateY(-50%);
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--hrb-kenarlik);
    background: #fff;
    color: var(--hrb-primary);
    box-shadow: var(--hrb-golge);
    align-items: center;
    justify-content: center;
}

.hrb-serit-ok:disabled { opacity: .35; cursor: default; }
.hrb-serit-sol { left: -6px; }
.hrb-serit-sag { right: -6px; }

@media (hover: hover) and (min-width: 576px) {
    .hrb-serit-ok { display: flex; }
    .hrb-serit-sarmal { padding: 0 10px; }
}