/* =========================================================================
   Veresiye Defteri — tasarım sistemi
   Açık tema varsayılan, koyu tema data-bs-theme="dark" ile.
   Mobil öncelikli: önce telefon düzeni, sonra medya sorgularıyla masaüstü.
   ========================================================================= */

:root {
    --v-yuvarlak: 12px;
    --v-yuvarlak-kucuk: 8px;
    --v-ust-yukseklik: 56px;
    --v-alt-yukseklik: 62px;
    --v-yan-genislik: 248px;
}

[data-bs-theme="light"] {
    --bs-body-bg: #f6f7f9;
    --bs-body-color: #1f2430;
    --bs-emphasis-color: #0b0f18;
    --bs-secondary-color: rgb(31 36 48 / 65%);
    --bs-border-color: #e2e5ea;
    --v-marka: #0d7a6b;
    --v-marka-koyu: #0a5d52;
    --v-borc: #c2410c;
    --v-odenecek: #b91c1c;
    --v-alacak-cerceve: #0d7a6b;
    --v-alacak-zemin: #ecf6f4;
    --v-borc-cerceve: #b91c1c;
    --v-borc-zemin: #fdeeee;
    --v-rozet-zemin: #b91c1c;
    --v-maas: #6d28d9;
    --v-maas-cerceve: #6d28d9;
    --v-maas-zemin: #f1ecfd;
    --v-tahsilat: #15803d;
    --v-uyari: #b45309;
    --v-yuzey: #ffffff;
    --v-yuzey-2: #eef0f4;
    --v-ust-bg: #ffffff;
    --v-golge: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 10%);
    --v-golge-yuksek: 0 4px 12px rgb(16 24 40 / 12%);
    --v-odak: rgb(13 122 107 / 25%);
}

[data-bs-theme="dark"] {
    --bs-body-bg: #14171c;
    --bs-body-color: #e5e8ee;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: rgb(229 232 238 / 62%);
    --bs-border-color: #2b313b;
    --v-marka: #2bbfa6;
    --v-marka-koyu: #1d9c86;
    --v-borc: #fb923c;
    --v-odenecek: #f87171;
    --v-alacak-cerceve: #2bbfa6;
    --v-alacak-zemin: #16241f;
    --v-borc-cerceve: #f87171;
    --v-borc-zemin: #2a1a1a;

    /* Koyu temada rozet: açık kırmızı üzerinde beyaz yazı okunmuyordu. */
    --v-rozet-zemin: #dc2626;
    --v-maas: #a78bfa;
    --v-maas-cerceve: #a78bfa;
    --v-maas-zemin: #1e1a2b;
    --v-tahsilat: #4ade80;
    --v-uyari: #fbbf24;
    --v-yuzey: #1b1f26;
    --v-yuzey-2: #252b34;
    --v-ust-bg: #1b1f26;
    --v-golge: 0 1px 2px rgb(0 0 0 / 40%);
    --v-golge-yuksek: 0 4px 14px rgb(0 0 0 / 45%);
    --v-odak: rgb(43 191 166 / 30%);
}

html {
    /* Tema geçişinde beyaz parlama olmasın. */
    background-color: var(--bs-body-bg);
}

body {
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
}

/* Bootstrap birincil rengini markaya bağla. */
.btn-primary {
    --bs-btn-bg: var(--v-marka);
    --bs-btn-border-color: var(--v-marka);
    --bs-btn-hover-bg: var(--v-marka-koyu);
    --bs-btn-hover-border-color: var(--v-marka-koyu);
    --bs-btn-active-bg: var(--v-marka-koyu);
    --bs-btn-active-border-color: var(--v-marka-koyu);
    --bs-btn-disabled-bg: var(--v-marka);
    --bs-btn-disabled-border-color: var(--v-marka);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
}

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

a {
    color: var(--v-marka);
}

.form-control:focus,
.form-select:focus,
.btn:focus-visible,
a:focus-visible {
    border-color: var(--v-marka);
    box-shadow: 0 0 0 3px var(--v-odak);
    outline: none;
}

/* -------------------------------------------------------------- iskelet */

.uygulama {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.ust-cubuk {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: var(--v-ust-yukseklik);
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .75rem;
    padding-top: env(safe-area-inset-top);
    background: var(--v-ust-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.marka {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--bs-emphasis-color);
    text-decoration: none;
    white-space: nowrap;
}

.marka-simge {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--v-marka);
    color: #fff;
    font-weight: 700;
    flex: 0 0 auto;
}

.ust-sag {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .25rem;
}

.ikon-dugme {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-radius: var(--v-yuvarlak-kucuk);
    background: transparent;
    color: var(--bs-body-color);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
}

.ikon-dugme:hover {
    background: var(--v-yuzey-2);
    color: var(--bs-emphasis-color);
}

.govde {
    flex: 1;
    display: flex;
    min-height: 0;
}

.icerik {
    flex: 1;
    min-width: 0;
    padding: 1rem .75rem calc(var(--v-alt-yukseklik) + env(safe-area-inset-bottom) + 1rem);
}

.sayfa-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.sayfa-baslik h1 {
    font-size: 1.35rem;
    font-weight: 650;
    margin: 0;
}

/* ---------------------------------------------------------- yan menü */

.yan-menu {
    display: none;
    width: var(--v-yan-genislik);
    flex: 0 0 var(--v-yan-genislik);
    border-right: 1px solid var(--bs-border-color);
    background: var(--v-yuzey);
    padding: .75rem;
}

.menu-baglanti {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .7rem;
    border-radius: var(--v-yuvarlak-kucuk);
    color: var(--bs-body-color);
    text-decoration: none;
    font-size: .95rem;
    margin-bottom: 2px;
}

.menu-baglanti:hover {
    background: var(--v-yuzey-2);
    color: var(--bs-emphasis-color);
}

.menu-baglanti.active {
    background: color-mix(in srgb, var(--v-marka) 14%, transparent);
    color: var(--v-marka);
    font-weight: 600;
}

.menu-ikon {
    width: 1.25rem;
    text-align: center;
    flex: 0 0 auto;
}

.menu-baslik {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bs-secondary-color);
    padding: .9rem .7rem .35rem;
    font-weight: 600;
}

/* ------------------------------------------------------- alt gezinme */

.alt-gezinme {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1035;
    display: flex;
    height: calc(var(--v-alt-yukseklik) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--v-ust-bg);
    border-top: 1px solid var(--bs-border-color);
}

.alt-baglanti {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--bs-secondary-color);
    text-decoration: none;
    font-size: .68rem;
    padding-top: 4px;
}

.alt-baglanti .alt-ikon {
    font-size: 1.15rem;
    line-height: 1;
}

.alt-baglanti.active {
    color: var(--v-marka);
    font-weight: 600;
}

.alt-baglanti.alt-vurgu .alt-ikon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-top: -12px;
    border-radius: 50%;
    background: var(--v-marka);
    color: #fff;
    box-shadow: var(--v-golge-yuksek);
}

/* ------------------------------------------------------------ kartlar */

.kart {
    background: var(--v-yuzey);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--v-yuvarlak);
    box-shadow: var(--v-golge);
}

.kart + .kart {
    margin-top: .75rem;
}

.kart-govde {
    padding: 1rem;
}

/* ------------------------------------------------------------- tutar */

.tutar {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    white-space: nowrap;
}

.tutar-borc {
    color: var(--v-borc);
}

.tutar-tahsilat {
    color: var(--v-tahsilat);
}

/* Dükkânın ÖDEYECEĞİ para. Alacaktan ayrı bir renk: ikisi de tutar
   gösterdiği için aynı turuncuyla ayırt edilemiyordu. */
.tutar-odenecek {
    color: var(--v-odenecek);
}

/* --------------------------------------------- panel bölümleri (alacak/borç) */

/*
   Paneldeki iki para yönü ayrı çerçevelerde durur. Ayrımı yalnızca renge
   bırakmıyoruz: sol kenar şeridi, hafif zemin ve başlıktaki ok işareti
   (aşağı = bana gelecek, yukarı = benden çıkacak) renk körlüğünde de çalışır.
*/
.panel-bolum {
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--bs-border-color);
    border-radius: var(--v-yuvarlak);
    padding: .75rem;
    margin-bottom: 1rem;
}

.panel-bolum > .kart:first-of-type {
    margin-top: 0;
}

.panel-bolum-baslik {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    margin: 0 0 .6rem .15rem;
}

.panel-bolum-alacak {
    border-left-color: var(--v-alacak-cerceve);
    background: var(--v-alacak-zemin);
}

.panel-bolum-alacak .panel-bolum-baslik {
    color: var(--v-alacak-cerceve);
}

.panel-bolum-borc {
    border-left-color: var(--v-borc-cerceve);
    background: var(--v-borc-zemin);
}

.panel-bolum-borc .panel-bolum-baslik {
    color: var(--v-borc-cerceve);
}

/* Çalışanlara ödenecek maaş. Alacak (yeşil) ve tedarikçi borcu (kırmızı) ile
   karışmasın diye üçüncü bir renk. */
.tutar-maas {
    color: var(--v-maas);
}

.panel-bolum-maas {
    border-left-color: var(--v-maas-cerceve);
    background: var(--v-maas-zemin);
}

.panel-bolum-maas .panel-bolum-baslik {
    color: var(--v-maas-cerceve);
}

.tutar-buyuk {
    font-size: 1.6rem;
    font-weight: 650;
    letter-spacing: -.01em;
}

/* --------------------------------------------------- giriş / bilgi sayfaları */

.giris-sayfa,
.bilgi-sayfa {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    text-align: center;
}

.bilgi-sayfa > * {
    max-width: 26rem;
    margin-inline: auto;
}

.bilgi-ikon {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: .5rem;
}

.giris-kart {
    width: 100%;
    max-width: 25rem;
    background: var(--v-yuzey);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--v-yuvarlak);
    box-shadow: var(--v-golge-yuksek);
    padding: 1.75rem 1.5rem;
    text-align: initial;
}

.giris-logo {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    border-radius: 14px;
    background: var(--v-marka);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
}

.bos-duzen-ust {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 10;
}

/* Tema düğmesindeki simge, aktif temaya göre değişir. */
[data-bs-theme="light"] .tema-ay,
[data-bs-theme="dark"] .tema-gunes {
    display: none;
}

/* Panelde yan yana iki özet kutusu; dar telefonda da sığar. */
.ozet-izgara {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-top: .75rem;
}

.ozet-izgara .kart + .kart {
    margin-top: 0;
}

/* ------------------------------------------------------------ grafikler */

.grafik {
    margin: 0;
}

/*
   Sütunlar SVG değil HTML: SVG genişliğe esnetildiği için içine yazılan tarih
   ve tutar da eziliyordu. Yükseklik yüzdeyle veriliyor, yazı bozulmuyor.
*/
/*
   Sütunlar SVG değil HTML: SVG genişliğe esnetildiği için içine yazılan tarih
   ve tutar da eziliyordu. Yükseklik yüzdeyle veriliyor, yazı bozulmuyor.

   Otuz gün ekrana sığmadığı için sütun genişliği SABİT ve grafik yatay kayıyor.
   Sütunları daraltıp sığdırmak denendi; tarih ve tutar okunmaz hale geliyordu.
*/
.grafik-kaydirma {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: .25rem;

    /* Parmakla kaydırırken sütunlar hizada dursun. */
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.grafik-sutunlar {
    display: flex;
    align-items: stretch;
    gap: 2px;
    height: 170px;
    width: max-content;
    min-width: 100%;
    border-bottom: 1px solid var(--bs-border-color);
}

/* Her gün bir düğme: dokunma hedefi tüm sütun yüksekliği kadar. */
.grafik-gun {
    flex: 0 0 42px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 3px;
    padding: 2px 0 0;
    border: none;
    background: transparent;
    border-radius: 4px 4px 0 0;
    scroll-snap-align: end;
}

.grafik-gun:hover,
.grafik-gun-secili {
    background: var(--v-yuzey-2);
}

/* Sütunun üstündeki tutarlar: birinci seri üstte, ikincisi altında. */
.grafik-degerler {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
    min-height: 1.8rem;
    justify-content: flex-end;
}

.grafik-deger {
    font-size: .62rem;
    font-weight: 600;
    white-space: nowrap;
}

.grafik-cubuklar {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    min-height: 0;
}

.grafik-cubuk {
    width: 12px;
    border-radius: 2px 2px 0 0;
}

.grafik-cubuk-birinci {
    background: var(--v-borc);
}

.grafik-cubuk-ikinci {
    background: var(--v-tahsilat);
}

.grafik-gun-etiket {
    font-size: .62rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    padding-bottom: 2px;
}

.grafik-anahtar {
    display: flex;
    gap: 1rem;
    justify-content: center;
    font-size: .75rem;
    color: var(--bs-secondary-color);
    margin-top: .5rem;
}

.grafik-nokta {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 2px;
    vertical-align: -1px;
}

.grafik-nokta-borc {
    background: var(--v-borc);
}

.grafik-nokta-tahsilat {
    background: var(--v-tahsilat);
}

/* Yatay çubuklar */

.cubuk-liste {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.cubuk-ust {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    font-size: .875rem;
}

.cubuk-ad {
    min-width: 0;
}

.cubuk-yol {
    height: 8px;
    border-radius: 4px;
    background: var(--v-yuzey-2);
    overflow: hidden;
    margin-top: .25rem;
}

.cubuk-dolgu {
    height: 100%;
    border-radius: 4px;
    background: var(--v-marka);
    min-width: 2px;
}

.cubuk-vurgu {
    background: var(--v-borc);
}

.cubuk-alt {
    margin-top: .15rem;
}

/* --------------------------------------------------------- yardımcılar */

.bos-durum {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--bs-secondary-color);
}

.bos-durum-ikon {
    font-size: 2.25rem;
    opacity: .6;
    margin-bottom: .5rem;
}

/* Dokunma hedefleri en az 44px (mobil kullanılabilirlik). */
.btn,
.form-control,
.form-select {
    min-height: 44px;
}

.btn-sm {
    min-height: 36px;
}

/* Geniş tablolar sayfayı yatay kaydırmasın, kendi içinde kaysın. */
.tablo-sarmal {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Blazor hata çubuğu */
#blazor-error-ui {
    background: #fff3cd;
    color: #664d03;
    bottom: 0;
    box-shadow: 0 -1px 2px rgb(0 0 0 / 20%);
    display: none;
    left: 0;
    padding: .8rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1060;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}

.blazor-error-boundary {
    background: var(--v-borc);
    padding: 1rem;
    color: white;
    border-radius: var(--v-yuvarlak-kucuk);
}

/* ==========================================================================
/* ------------------------------------------------- vade bildirimi */

/*
   Pencere alt gezinme çubuğunun (z-index 1035) ÜSTÜNDE, hata şeridinin
   (1060) altında durur. Rozet ise çubuğun altında kalır ki telefonda
   gezinmeyi kapatmasın.
*/
.vade-ortu {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgb(0 0 0 / 45%);
}

.vade-pencere {
    width: min(30rem, 100%);
    max-height: 80vh;
    overflow-y: auto;
    margin: 0;
    box-shadow: var(--v-golge-yuksek);
}

/*
   Rozet DOLU renkli: önceki hâli beyaz zeminliydi ve sayfa arka planından
   ayırt edilemiyordu. Zemin borç rengi, yazı beyaz; sayı balonu ise ters
   çevrilmiş (beyaz zemin, borç rengi yazı) ki rakam okunsun.
*/
.vade-rozet {
    position: fixed;
    right: 1rem;

    /* Telefonda alt gezinme çubuğunun hemen üstünde. */
    bottom: calc(var(--v-alt-yukseklik) + env(safe-area-inset-bottom) + .75rem);
    z-index: 1034;
    display: flex;
    align-items: center;
    gap: .45rem;
    border: none;
    border-radius: 999px;
    padding: .55rem .95rem;
    background: var(--v-rozet-zemin);
    color: #fff;
    font-weight: 700;
    box-shadow: var(--v-golge-yuksek);
}

.vade-rozet:hover,
.vade-rozet:focus-visible {
    filter: brightness(1.08);
    color: #fff;
}

.vade-rozet-sayi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    background: #fff;
    color: var(--v-rozet-zemin);
    font-size: .78rem;
}

/* ==========================================================================
/* Ölçek etiketi SVG'nin dışında: telefon genişliğinde SVG içine yazılan metin
   okunamayacak kadar küçülüyordu. */
.grafik-olcek {
    font-size: .7rem;
    color: var(--bs-secondary-color);
    text-align: right;
    margin-bottom: 2px;
}

.grafik-detay {
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--bs-border-color);
    min-height: 3.2rem;
}

/* ------------------------------------------------- kayan seçim çubuğu */

/*
   İki seçenekli anahtar (veresiye / borçlar). Seçili olan kayarak geçsin diye
   arka plan "transition" ile taşınıyor; hareket azaltma tercihi olan
   kullanıcılarda dosyanın sonundaki kural bunu kendiliğinden kapatıyor.
*/
.secim-cubugu {
    display: flex;
    gap: .25rem;
    padding: .25rem;
    border-radius: 999px;
    background: var(--v-yuzey-2);
}

.secim-dugme {
    flex: 1;
    border: none;
    border-radius: 999px;
    padding: .4rem .75rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    background: transparent;
    transition: background-color .18s ease, color .18s ease;
}

.secim-dugme:hover {
    color: var(--bs-body-color);
}

.secim-secili {
    background: var(--v-yuzey);
    color: var(--v-marka);
    box-shadow: var(--v-golge);
}

/* ==========================================================================
   Masaüstü / tablet
   ========================================================================== */

@media (min-width: 992px) {
    .yan-menu {
        display: block;
    }

    .alt-gezinme {
        display: none;
    }

    .icerik {
        padding: 1.5rem 1.75rem 2.5rem;
        max-width: 1200px;
    }

    .sayfa-baslik h1 {
        font-size: 1.6rem;
    }

    /* Masaüstünde alt gezinme çubuğu yok; rozet gerçekten köşeye otursun. */
    .vade-rozet {
        bottom: 1.25rem;
        right: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}