/* ═══════════════════════════════════════════════════════════════════
   SUPERFLY — Design Token System
   Mockup'tan çıkartılmış CSS değişkenleri + açık/koyu tema desteği
   ═══════════════════════════════════════════════════════════════════ */

/* ── KOYU TEMA (varsayılan) ─────────────────────────────────────── */
:root,
[data-theme="dark"] {
    /* Zemin */
    --fly-bg:         #0F172A;
    --fly-bg-body:    #0a0f1d;
    --fly-panel:      #1E293B;
    --fly-panel2:     #172033;
    --fly-line:       #2B3A52;

    /* Kenar çubuğu */
    --fly-sidebar-bg: linear-gradient(180deg, #111a2e, #0b1322);
    --fly-sidebar-bg: linear-gradient(180deg, #111a2e, #0b1322);
    --fly-sidebar-border: #2B3A52;
    --fly-sidebar-header-bg: #0d1524;
    --fly-sidebar-footer-bg: #0d1524;
    --fly-sidebar-hover: #16213a;
    --fly-sidebar-active-bg: linear-gradient(90deg, rgba(165,26,23,.25), rgba(165,26,23,.06));
    /* Dropdown menü satırı hover'ı. Üst menü çubuğu her iki temada da koyu
       kalır ama AÇILIR PANEL açık temada beyazdır — bu yüzden panel içi hover
       ayrı değişkenle yönetilir, sidebar-hover ile aynı değildir. */
    --fly-nav-hover-bg:  #16213a;
    --fly-nav-hover-txt: #E2E8F0;
    --fly-sidebar-active-border: var(--fly-accent);

    /* Yazılar */
    --fly-txt:        #E2E8F0;
    --fly-txt-dim:    #94A3B8;
    /* C3 düzeltmesi: eski #64748B, --fly-bg (#0F172A) üzerinde ~3.75:1 kontrast
       veriyordu (WCAG AA metin eşiği 4.5:1'in altında). #7C8CA6 ~5.2:1 verir. */
    --fly-txt-mute:   #7C8CA6;

    /* İçerik alanı */
    --fly-content-bg: #0F172A;

    /* Vurgu / Renk — SuperPos brand kırmızısı varsayılan */
    --fly-accent:     #A51A17;
    --fly-accent2:    #c42320;
    --fly-accent-dark:#7c1210;
    --fly-accent-rgb: 165,26,23;
    --fly-success:    #10B981;
    --fly-warn:       #F59E0B;
    /* A3 düzeltmesi: marka kırmızısı (--fly-accent, varsayılan #A51A17,
       "rose" preset'inde #E11D48) ile hata rengi aynı kırmızı aileydi.
       Vermillion tonuna kaydırıldı — "dur/hata" anlamı korunuyor ama marka
       vurgusuyla (ve rose/orange accent seçenekleriyle) karışmıyor. */
    --fly-error:      #F2542D;

    /* Gölge */
    --fly-shadow:     0 10px 30px rgba(0,0,0,.45);
    --fly-shadow-sm:  0 4px 14px rgba(0,0,0,.35);

    /* Şekil */
    --fly-radius:     14px;
    --fly-radius-sm:  10px;

    --fly-font-base: 15px;
    --fly-font-control: .95rem;
    --fly-font-control-sm: .9rem;
    --fly-font-table: .92rem;
    --fly-font-label: .78rem;

    /* Kart */
    --fly-card-bg:    #1E293B;
    --fly-card-border: #2B3A52;

    /* Scrollbar */
    --fly-scroll-track: #0b1322;
    --fly-scroll-thumb: #2B3A52;

    /* Toggle icon */
    --fly-theme-icon: "☀️";

    /* Bootstrap override */
    --bs-body-bg:              #0F172A;
    --bs-body-bg-rgb:          15,23,42;    /* toast/popover arka planı bunu kullanıyor */
    --bs-body-color:           #E2E8F0;
    --bs-body-color-rgb:       226,232,240;  /* text-body için RGB gerekli */
    --bs-secondary-color-rgb:  148,163,184;  /* text-muted için RGB gerekli */
    --bs-tertiary-color-rgb:   100,116,139;
    --bs-light:                #1E293B;
    --bs-light-rgb:            30,41,59;
    /* Bootstrap 5.3 değişkenleri — fly sistemine bağla */
    --bs-heading-color:     var(--fly-txt);
    --bs-secondary-color:   var(--fly-txt-dim);
    --bs-tertiary-color:    var(--fly-txt-mute);
    --bs-border-color:      var(--fly-line);
    --bs-tertiary-bg:       var(--fly-panel2);
    --bs-secondary-bg:      var(--fly-panel);
    --bs-card-bg:           var(--fly-panel);
    --bs-card-border-color: var(--fly-line);
}

/* ── AÇIK TEMA ──────────────────────────────────────────────────── */
[data-theme="light"] {
    /* Zemin */
    --fly-bg:         #F1F5F9;
    --fly-bg-body:    #F8FAFC;
    --fly-panel:      #FFFFFF;
    --fly-panel2:     #F1F5F9;
    --fly-line:       #E2E8F0;

    /* Kenar çubuğu — karanlık kalır (POS standardı) */
    --fly-sidebar-bg: linear-gradient(180deg, #1e293b, #0f172a);
    --fly-sidebar-border: #2B3A52;
    --fly-sidebar-header-bg: #0d1524;
    --fly-sidebar-footer-bg: #0d1524;
    --fly-sidebar-hover: #243149;
    --fly-sidebar-active-bg: linear-gradient(90deg, rgba(165,26,23,.25), rgba(165,26,23,.06));
    /* Açık temada açılır panel beyaz zeminlidir; hover koyu lacivert olursa
       yazı siyah kalıp okunmaz hale geliyordu. Açık tonlu hover + koyu yazı. */
    --fly-nav-hover-bg:  #E2E8F0;
    --fly-nav-hover-txt: #0F172A;
    --fly-sidebar-active-border: var(--fly-accent);

    /* Yazılar */
    --fly-txt:        #0F172A;
    --fly-txt-dim:    #334155;
    --fly-txt-mute:   #64748B;

    /* İçerik alanı */
    --fly-content-bg: #F1F5F9;

    /* Vurgu / Renk — SuperPos brand kırmızısı varsayılan */
    --fly-accent:     #A51A17;
    --fly-accent2:    #c42320;
    --fly-accent-dark:#7c1210;
    --fly-accent-rgb: 165,26,23;
    --fly-success:    #059669;
    --fly-warn:       #D97706;
    /* A3 düzeltmesi: bkz. koyu tema açıklaması — aynı vermillion ailesi. */
    --fly-error:      #D64526;

    /* Gölge */
    --fly-shadow:     0 4px 20px rgba(0,0,0,.10);
    --fly-shadow-sm:  0 2px 8px rgba(0,0,0,.08);

    /* Kart */
    --fly-card-bg:    #FFFFFF;
    --fly-card-border: #E2E8F0;

    /* Scrollbar */
    --fly-scroll-track: #E2E8F0;
    --fly-scroll-thumb: #94A3B8;

    /* Bootstrap override */
    --bs-body-bg:              #F1F5F9;
    --bs-body-bg-rgb:          241,245,249;  /* toast/popover arka planı bunu kullanıyor */
    --bs-body-color:           #0F172A;
    --bs-body-color-rgb:       15,23,42;    /* text-body için RGB gerekli */
    --bs-secondary-color-rgb:  51,65,85;    /* text-muted için RGB gerekli */
    --bs-tertiary-color-rgb:   100,116,139;
    /* 28.08.2026 — HATA DÜZELTMESİ: --bs-light / --bs-light-rgb yalnızca
       yukarıdaki KOYU blokta (#1E293B) tanımlıydı ve burada geri alınmıyordu.
       data-theme bir ATTRIBUTE olduğu için açık temada bu iki değişken koyu
       değerini miras alıyordu: bg-light kartlar açık temada koyu lacivert
       blok, border-light ise beyaz kart üzerinde koyu bir çizgi olarak
       çıkıyordu (koyu temada da panel rengiyle aynı olup kayboluyordu).
       Bootstrap varsayılanına döndürüldü. */
    --bs-light:                #F8F9FA;
    --bs-light-rgb:            248,249,250;
    /* Bootstrap 5.3 değişkenleri — fly sistemine bağla */
    --bs-heading-color:     var(--fly-txt);
    --bs-secondary-color:   var(--fly-txt-dim);
    --bs-tertiary-color:    var(--fly-txt-mute);
    --bs-border-color:      var(--fly-line);
    --bs-tertiary-bg:       var(--fly-panel2);
    --bs-secondary-bg:      var(--fly-panel);
    --bs-card-bg:           var(--fly-panel);
    --bs-card-border-color: var(--fly-line);
}

/* ═══════════════════════════════════════════════════════════════════
   BOOTSTRAP TEMA OVERRIDE
   bg-white, bg-light, table-light, text-dark gibi sabit renkli
   Bootstrap sınıflarını CSS değişkenleriyle ezer — dark/light tema
   geçişlerinde sayfa genelinde tutarlı renk garantisi sağlar.
   ═══════════════════════════════════════════════════════════════════ */

/* Panel arka planı (kart, header, footer, input-group) */
.bg-white,
.card-header.bg-white,
.card-footer.bg-white,
.input-group-text.bg-white,
.modal-content.bg-white {
    background-color: var(--fly-panel) !important;
    color: var(--fly-txt) !important;
}

/* card-header / card-footer genel renk — text-white sınıflıları atla */
.card-header:not([style*="color"]):not(.text-white),
.card-footer:not([style*="color"]):not(.text-white) {
    color: var(--fly-txt) !important;
}

/* Hafif arka plan (araç çubuğu, tablo başlığı, panel2 alanları) */
.bg-light,
.table-light,
thead.table-light,
thead.bg-light,
tfoot.bg-light,
.modal-footer.bg-light,
.modal-footer.bg-white,
th.bg-light,
td.bg-light,
tr.table-light > td,
tr.table-light > th {
    background-color: var(--fly-panel2) !important;
    border-color: var(--fly-line) !important;
}

/* Tam sayfa arka planı (container-fluid bg-light min-vh-100) */
.container-fluid.bg-light,
div.bg-light.min-vh-100 {
    background-color: var(--fly-bg) !important;
}

/* Metin rengi */
.text-dark {
    color: var(--fly-txt) !important;
}

/* Bootstrap border renkleri */
.border-bottom,
.border-top,
.border {
    border-color: var(--fly-line) !important;
}

/* Input-group-text genel */
.input-group-text {
    background-color: var(--fly-panel2) !important;
    color: var(--fly-txt-dim) !important;
    border-color: var(--fly-line) !important;
}

/* Bootstrap tablo genel theming */
.table {
    --bs-table-bg: var(--fly-panel);
    --bs-table-color: var(--fly-txt);
    --bs-table-border-color: var(--fly-line);
    --bs-table-striped-bg: var(--fly-panel2);
    --bs-table-hover-bg: rgba(var(--fly-accent-rgb), .08);
    --bs-table-active-bg: var(--fly-panel2);
}

/* Form elemanları */
.form-control,
.form-select {
    background-color: var(--fly-panel2) !important;
    color: var(--fly-txt) !important;
    border-color: var(--fly-line) !important;
    font-size: var(--fly-font-control);
}
.form-select option {
    background-color: var(--fly-panel) !important;
    color: var(--fly-txt) !important;
}
[data-theme="light"] .form-select option {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
}
[data-theme="dark"] .form-select option {
    background-color: #1E293B !important;
    color: #E2E8F0 !important;
}
.form-control-sm,
.form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .btn {
    font-size: var(--fly-font-control-sm);
}
.btn {
    font-size: var(--fly-font-control);
}
.table {
    font-size: var(--fly-font-table);
}
.form-control:focus,
.form-select:focus {
    background-color: var(--fly-panel2) !important;
    border-color: var(--fly-accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--fly-accent-rgb),.18) !important;
}
.form-control::placeholder { color: var(--fly-txt-mute) !important; }
/* 10.09.2026: Bootstrap .is-invalid kırmızı çerçevesi yukarıdaki !important border-color
   yüzünden hiç görünmüyordu (tema rengi kazanıyordu) — zorunlu alan uyarıları yalnız
   metin olarak kalıyordu. Burada aynı ağırlıkla geri alınır; odakta da kırmızı kalır. */
.form-control.is-invalid,
.form-select.is-invalid,
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220,53,69,.18) !important;
}

/* Card genel
   color koyulmadı — accent renkli header'ların inline color:white'ı korunmalı.
   .card-header-custom (accent renkli özel başlıklar) background-color'dan da
   hariç tutulur — aksi halde bu !important kuralı arka planı var(--fly-panel2)'ye
   zorlar, üstündeki beyaz yazı açık temada okunmaz hale gelirdi. */
.card {
    background-color: var(--fly-panel) !important;
    border-color: var(--fly-line) !important;
}
.card-header:not(.card-header-custom),
.card-footer {
    background-color: var(--fly-panel2) !important;
    border-color: var(--fly-line) !important;
}

/* Badge bg-light */
.badge.bg-light {
    background-color: var(--fly-panel2) !important;
    color: var(--fly-txt-dim) !important;
}

/* Modal */
.modal-content {
    background-color: var(--fly-panel) !important;
    border-color: var(--fly-line) !important;
}
.modal-header,
.modal-footer {
    background-color: var(--fly-panel2) !important;
    border-color: var(--fly-line) !important;
}

/* Toast (kayıt/hata mesajları) — Bootstrap varsayılanı --bs-body-bg-rgb'e
   dayanıyor; bu değişken ezilmezse koyu temada beyaz zemin + beyaz yazı
   birleşip mesaj görünmez oluyordu. Zemin ve yazı burada garantiye alınır. */
.toast {
    background-color: var(--fly-panel) !important;
    color: var(--fly-txt) !important;
    border-color: var(--fly-line) !important;
    box-shadow: var(--fly-shadow) !important;
}
.toast-header {
    background-color: var(--fly-panel2) !important;
    color: var(--fly-txt) !important;
    border-color: var(--fly-line) !important;
}
.toast-body {
    color: var(--fly-txt) !important;
}

/* Dropdown */
.dropdown-menu {
    background-color: var(--fly-panel) !important;
    border-color: var(--fly-line) !important;
    color: var(--fly-txt) !important;
}
.dropdown-item {
    color: var(--fly-txt) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--fly-panel2) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   GENEL
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
    font-size: var(--fly-font-base);
    background: var(--fly-bg-body);
    color: var(--fly-txt);
    -webkit-font-smoothing: antialiased;
    transition: background 0.25s ease, color 0.25s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   SHELL LAYOUT
   ═══════════════════════════════════════════════════════════════════ */

.fly-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* ── ÜST MENÜ (pulldown) ──────────────────────────────────────────── */
.fly-topbar {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    height: 56px;
    padding: 0 14px;
    background: var(--fly-sidebar-bg);
    border-bottom: 1px solid var(--fly-sidebar-border);
    position: relative;
    z-index: 100;
}

.fly-topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
    padding-right: 14px;
    margin-right: 8px;
    border-right: 1px solid var(--fly-sidebar-border);
    flex-shrink: 0;
}

.fly-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
}

.fly-brand-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2563EB, #10B981);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
}

/* 15.08.2026: Bu iki kural sadece ".fly-brand" altını hedefliyordu, ama
   markup'ta (MainLayout.razor) marka bloğunun class'ı "fly-topbar-brand";
   ".fly-brand" hiçbir yerde kullanılmıyor. Bu yüzden kurallar hiç uygulanmıyor,
   "SUPERFLY" ile "POS · YÖNETİM" satır atlamadan yan yana yapışık çıkıyordu.
   Selector'lere gerçek class eklendi (.fly-brand, ileride kullanılırsa diye kaldı). */
.fly-brand b,
.fly-topbar-brand b {
    font-size: 15px;
    letter-spacing: .5px;
    color: #fff;
}

.fly-brand small,
.fly-topbar-brand small {
    display: block;
    font-size: 9px;
    color: #64748B;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.2;
}

/* ── ÜST MENÜ NAV / DROPDOWN ───────────────────────────────────────── */
.fly-topnav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow: visible;
}

.fly-topnav-item {
    position: relative;
    flex-shrink: 0;
}

.fly-topnav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: var(--fly-radius-sm);
    color: #94A3B8;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: .15s;
    white-space: nowrap;
    border: none;
    background: transparent;
}

.fly-topnav-btn:hover {
    background: var(--fly-sidebar-hover);
    color: #fff;
}

.fly-topnav-btn.active {
    background: var(--fly-sidebar-active-bg);
    color: #fff;
    box-shadow: inset 0 -2px 0 var(--fly-sidebar-active-border);
}

.fly-topnav-arrow {
    font-size: 10px;
    transition: transform .2s ease;
    color: #64748B;
}

.fly-topnav-arrow.open {
    transform: rotate(180deg);
}

.fly-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 230px;
    background: var(--fly-card-bg);
    border: 1px solid var(--fly-card-border);
    border-radius: var(--fly-radius-sm);
    padding: 6px;
    box-shadow: var(--fly-shadow);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 110;
}

/* ── Dropdown bölüm başlığı ──────────────────────────────────────────
   Menü içinde "Günlük İşlemler / Kartlar / Raporlar" ayrımını verir.  */
.fly-nav-baslik {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--fly-txt-mute);
    padding: 9px 11px 4px;
    white-space: nowrap;
}

/* İlk başlık hariç hepsinin üstüne ince ayraç */
.fly-nav-baslik:not(:first-child) {
    margin-top: 4px;
    border-top: 1px solid var(--fly-card-border);
    padding-top: 9px;
}

/* ── Katlanır alt menü ("Raporlar ▸") ─────────────────────────────── */
.fly-nav-alt {
    width: 100%;
    margin-top: 4px;
    border-top: 1px solid var(--fly-card-border);
    border-radius: 0 0 8px 8px;
    padding-top: 11px;
    font-weight: 700;
}

.fly-nav-alt-arrow {
    margin-left: auto;
    font-size: 10px;
    transition: transform .18s ease;
}

.fly-nav-alt-arrow.open { transform: rotate(180deg); }

.fly-nav-alt.open { color: var(--fly-txt); }

.fly-nav-alt-govde {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 11px;
    padding-left: 8px;
    border-left: 2px solid var(--fly-card-border);
}

.fly-nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: 8px;
    color: var(--fly-txt-dim);
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: .15s;
    white-space: nowrap;
    border: none;
    background: transparent;
    width: 100%;
}

.fly-nav-link:hover {
    background: var(--fly-nav-hover-bg);
    color: var(--fly-nav-hover-txt);
}

.fly-nav-link:hover .fly-nav-icon {
    color: var(--fly-nav-hover-txt);
}

.fly-nav-link.active {
    background: var(--fly-sidebar-active-bg);
    color: var(--fly-txt);
    box-shadow: inset 3px 0 0 var(--fly-sidebar-active-border);
}

.fly-nav-link .fly-nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    font-size: 15px;
    display: grid;
    place-items: center;
}

/* ── ÜST MENÜ SAĞ AKSİYONLAR (tema / hesap) ───────────────────────── */
.fly-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    position: relative;
    flex-shrink: 0;
}

.fly-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fly-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563EB, #10B981);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    flex-shrink: 0;
    border: 2px solid var(--fly-success);
}

.fly-user-info { flex: 1; min-width: 0; }
.fly-user-info b { display: block; font-size: 12px; color: var(--fly-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fly-user-info small { font-size: 10px; color: var(--fly-txt-mute); }

.fly-footer-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fly-icon-btn {
    background: transparent;
    border: 1px solid var(--fly-sidebar-border);
    color: #94A3B8;
    border-radius: 8px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: .15s;
    padding: 0;
    font-size: 13px;
}

.fly-icon-btn:hover { background: var(--fly-sidebar-hover); color: #fff; border-color: var(--fly-accent); }
.fly-icon-btn.danger:hover { background: rgba(239,68,68,.15); color: var(--fly-error); border-color: var(--fly-error); }

/* ── CONTENT AREA ───────────────────────────────────────────────── */
.fly-content {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    isolation: isolate;
    background: var(--fly-content-bg);
    padding: 20px;
    transition: background 0.25s ease;
    scrollbar-width: thin;
    scrollbar-color: var(--fly-scroll-thumb) transparent;
}

/* ── POS TAM EKRAN MODU ──────────────────────────────────────────────
   MainLayout, POS rotalarında (.fly-app) üzerine "pos-tam" ekler:
   üst menü gizlenir, içerik boşluğu sıfırlanır ve sayfa tüm ekranı kaplar.
   Bildirim toast'ları layout'ta kaldığı için etkilenmez.               */
.fly-app.pos-tam .fly-topbar { display: none; }

.fly-app.pos-tam .fly-content {
    padding: 0;
    overflow: hidden;
}

.fly-content::-webkit-scrollbar { width: 4px; }
.fly-content::-webkit-scrollbar-track { background: transparent; }
.fly-content::-webkit-scrollbar-thumb { background: var(--fly-scroll-thumb); border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════════════
   GENEL BİLEŞEN STİLLERİ
   ═══════════════════════════════════════════════════════════════════ */

/* Kart */
.fly-card {
    background: var(--fly-card-bg);
    border: 1px solid var(--fly-card-border);
    border-radius: var(--fly-radius);
    padding: 18px;
    box-shadow: var(--fly-shadow-sm);
}

/* Sayfa başlığı */
.fly-page-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--fly-txt);
    margin-bottom: 4px;
}

.fly-page-sub {
    font-size: 12px;
    color: var(--fly-txt-mute);
}

/* Pill badge */
.fly-pill {
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--fly-accent2);
    background: rgba(37,99,235,.12);
    border: 1px solid rgba(37,99,235,.3);
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
}

/* Tablo satırı hover */
.fly-table-row {
    background: var(--fly-panel);
    border: 1px solid var(--fly-line);
    border-radius: 12px;
    padding: 10px 14px;
    transition: .12s;
}

.fly-table-row:hover {
    border-color: var(--fly-accent);
    background: rgba(37,99,235,.06);
}

/* Bootstrap override — tablo */
[data-theme="dark"] .table {
    --bs-table-bg: var(--fly-panel);
    --bs-table-color: var(--fly-txt);
    --bs-table-border-color: var(--fly-line);
    --bs-table-striped-color: var(--fly-txt);
    --bs-table-striped-bg: rgba(255,255,255,.04);
    --bs-table-hover-color: var(--fly-txt);
    --bs-table-hover-bg: rgba(37,99,235,.08);
    --bs-table-active-color: var(--fly-txt);
    --bs-table-active-bg: rgba(255,255,255,.06);
}

[data-theme="dark"] .card {
    background: var(--fly-panel);
    border-color: var(--fly-line);
    color: var(--fly-txt);
}

[data-theme="dark"] .modal-content {
    background: var(--fly-panel);
    border-color: var(--fly-line);
    color: var(--fly-txt);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background: var(--fly-panel2);
    border-color: var(--fly-line);
    color: var(--fly-txt);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background: var(--fly-panel2);
    border-color: var(--fly-accent);
    color: var(--fly-txt);
    box-shadow: 0 0 0 3px rgba(37,99,235,.2);
}

[data-theme="dark"] .form-control::placeholder { color: var(--fly-txt-mute); }

/* 20.08.2026 kullanıcı isteği: koyu temada input[type=date]/[type=time] yanındaki
   takvim/saat ikonları tarayıcının siyah varsayılan ikonuyla geliyor, koyu zeminde
   görünmüyordu. Native ikon renksiz (siyah) SVG olduğundan invert ile açık renge
   çeviriyoruz. */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.8;
}
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator:hover,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator:hover,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--fly-line);
}

/* Compact management screens */
.mgmt-page {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mgmt-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--fly-line);
    border-radius: 8px;
    background: var(--fly-panel);
    box-shadow: var(--fly-shadow-sm);
}

.mgmt-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    color: var(--fly-txt);
    font-size: 1rem;
    font-weight: 800;
}

.mgmt-title i {
    color: var(--fly-accent);
}

.mgmt-subtitle {
    margin-top: 2px;
    color: var(--fly-txt-mute);
    font-size: .72rem;
}

.mgmt-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.mgmt-icon-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 0;
}

.mgmt-card {
    border: 1px solid var(--fly-line);
    border-radius: 8px;
    background: var(--fly-panel);
    box-shadow: var(--fly-shadow-sm);
    overflow: hidden;
}

.mgmt-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 42px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--fly-line);
    background: var(--fly-panel2);
    color: var(--fly-txt);
    font-size: .84rem;
    font-weight: 800;
}

.mgmt-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 10px;
    border-bottom: 1px solid var(--fly-line);
    background: var(--fly-panel);
}

.mgmt-search {
    max-width: 360px;
}

.mgmt-table-wrap {
    overflow: auto;
    max-height: 64vh;
}

.mgmt-table {
    margin-bottom: 0;
    font-size: .84rem;
}

.mgmt-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid var(--fly-line);
    background: var(--fly-panel2);
    color: var(--fly-txt-dim);
    font-size: .68rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mgmt-table tbody tr {
    cursor: pointer;
}

.mgmt-table tbody tr.table-active {
    box-shadow: inset 3px 0 0 var(--fly-accent);
}

.mgmt-form-card {
    position: sticky;
    top: 68px;
}

.mgmt-form-body {
    padding: 10px;
}

.mgmt-form-body label,
.mgmt-field-label {
    margin-bottom: 2px;
    color: var(--fly-txt-dim);
    font-size: .72rem;
    font-weight: 800;
}

.mgmt-form-body .form-control,
.mgmt-form-body .form-select,
.mgmt-form-body .input-group-text {
    min-height: 30px;
    font-size: .84rem;
}

.mgmt-form-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px dashed var(--fly-line);
}

.mgmt-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.mgmt-summary-item {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--fly-line);
    border-radius: 8px;
    background: var(--fly-panel);
}

.mgmt-summary-label {
    display: block;
    color: var(--fly-txt-mute);
    font-size: .67rem;
    font-weight: 800;
    text-transform: uppercase;
}

.mgmt-summary-value {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: var(--fly-txt);
    font-size: .95rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mgmt-lines-scroll {
    overflow: auto;
    max-height: calc(100vh - 360px);
    min-height: 220px;
}

.mgmt-empty {
    padding: 28px 12px;
    color: var(--fly-txt-mute);
    text-align: center;
}

@media (max-width: 991.98px) {
    .mgmt-header,
    .mgmt-form-card {
        position: static;
    }

    .mgmt-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

[data-theme="dark"] .dropdown-menu {
    background: var(--fly-panel);
    border-color: var(--fly-line);
}

[data-theme="dark"] .dropdown-item {
    color: var(--fly-txt);
}

[data-theme="dark"] .dropdown-item:hover {
    background: var(--fly-sidebar-hover);
    color: #fff;
}

[data-theme="dark"] .table-bordered td,
[data-theme="dark"] .table-bordered th {
    border-color: var(--fly-line);
}

[data-theme="dark"] .list-group-item {
    background: var(--fly-panel);
    border-color: var(--fly-line);
    color: var(--fly-txt);
}

[data-theme="dark"] .breadcrumb-item,
[data-theme="dark"] .breadcrumb-item a { color: var(--fly-txt-dim); }
[data-theme="dark"] .breadcrumb-item.active { color: var(--fly-txt-mute); }

[data-theme="dark"] .btn-outline-secondary {
    color: var(--fly-txt-dim);
    border-color: var(--fly-line);
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background: var(--fly-panel2);
    color: var(--fly-txt);
}

[data-theme="dark"] .nav-tabs .nav-link { color: var(--fly-txt-dim); border-color: var(--fly-line); }
[data-theme="dark"] .nav-tabs .nav-link.active { background: var(--fly-panel); border-bottom-color: var(--fly-panel); color: var(--fly-txt); }
[data-theme="dark"] .nav-tabs { border-bottom-color: var(--fly-line); }

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE — BOOTSTRAP COMPONENT OVERRIDES
   ═══════════════════════════════════════════════════════════════════ */

/* bg-light / bg-white → panel rengi */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white {
    background-color: var(--fly-panel) !important;
    color: var(--fly-txt) !important;
}

/* card-header / card-footer beyaz arka planları
   11.08.2026: ":not(.card-header-custom)" eklendi — bu istisna satır ~292'deki genel
   (tema-bağımsız) kuralda vardı ama buradaki karanlık-tema kuralında hiç yoktu; bu yüzden
   accent renkli özel başlıklar (card-header-custom, ör. FaturaDetay "Yeni Fatura" ve
   DovizKurlari "Döviz Kur Girişi") karanlık temada da panel griye zorlanıyordu — sadece
   açık temada değil, aynı hatanın karanlık temadaki eşleniği. */
[data-theme="dark"] .card-header:not(.card-header-custom),
[data-theme="dark"] .card-footer {
    background-color: var(--fly-panel2) !important;
    border-color: var(--fly-line) !important;
    color: var(--fly-txt) !important;
}

/* thead / table-light satır başlıkları */
[data-theme="dark"] .table-light,
[data-theme="dark"] thead.table-light,
[data-theme="dark"] .table-light > th,
[data-theme="dark"] thead th,
[data-theme="dark"] .table thead th {
    background-color: var(--fly-panel2) !important;
    color: var(--fly-txt-dim) !important;
    border-color: var(--fly-line) !important;
}

/* input-group-text */
[data-theme="dark"] .input-group-text {
    background-color: var(--fly-panel2) !important;
    border-color: var(--fly-line) !important;
    color: var(--fly-txt-dim) !important;
}

/* Alert */
[data-theme="dark"] .alert-info {
    background-color: rgba(37,99,235,.15) !important;
    border-color: rgba(37,99,235,.3) !important;
    color: #93c5fd !important;
}

/* Badge bg-light */
[data-theme="dark"] .badge.bg-light {
    background-color: var(--fly-panel2) !important;
    color: var(--fly-txt-dim) !important;
}

/* Modal body / content */
[data-theme="dark"] .modal-body,
[data-theme="dark"] .modal-content {
    background-color: var(--fly-panel) !important;
    color: var(--fly-txt) !important;
}
[data-theme="dark"] .modal-header {
    border-color: var(--fly-line) !important;
}

/* Tab content içi */
[data-theme="dark"] .tab-content,
[data-theme="dark"] .tab-content.bg-light {
    background-color: var(--fly-panel2) !important;
    border-color: var(--fly-line) !important;
    color: var(--fly-txt) !important;
}

/* Dashboard kartları */
[data-theme="dark"] .dash-card {
    background: var(--fly-panel) !important;
    border-color: var(--fly-line) !important;
    color: var(--fly-txt) !important;
}
[data-theme="dark"] .dash-card-header {
    background: var(--fly-panel2) !important;
    border-color: var(--fly-line) !important;
    color: var(--fly-txt-dim) !important;
}
[data-theme="dark"] .hizli-bar-btn {
    background: var(--fly-panel) !important;
    border-color: var(--fly-line) !important;
    color: var(--fly-txt) !important;
}
[data-theme="dark"] .hizli-bar-btn:hover {
    background: var(--fly-panel2) !important;
}
[data-theme="dark"] .hbb-lbl { color: var(--fly-txt-dim) !important; }
/* 27.08.2026: kritik stok satırları dolu kırmızı zeminden nötr yüzeye alındı
   (bkz. Anasayfa.razor.css/.kritik-item — kart zaten kırmızı rozetle
   çerçeveli, her satırın ayrıca kırmızı olması uyarıyı zayıflatıyordu).
   Koyu tema da aynı davranışa çekildi. */
[data-theme="dark"] .kritik-item {
    background: transparent !important;
    border-color: var(--fly-line) !important;
}
[data-theme="dark"] .kritik-item:hover {
    background: rgba(239,68,68,.12) !important;
    border-color: rgba(239,68,68,.40) !important;
}
[data-theme="dark"] .kritik-ad { color: var(--fly-txt) !important; }
[data-theme="dark"] .cari-row:hover { background: var(--fly-panel2) !important; }
[data-theme="dark"] .akt-ci:hover { background: var(--fly-panel2) !important; }
[data-theme="dark"] .akt-ci-cari { color: var(--fly-txt) !important; }
[data-theme="dark"] .sistem-kart {
    background: var(--fly-panel) !important;
    border-color: var(--fly-line) !important;
}
[data-theme="dark"] .sistem-deger { color: var(--fly-txt) !important; }
[data-theme="dark"] .uyari-satir.uyari-aktif:hover { background: var(--fly-panel2) !important; }
[data-theme="dark"] .uyari-mesaj { color: var(--fly-txt) !important; }

/* ─── HIZLI ERIŞIM MODÜL KARTLARI (Anasayfa) ─ 26.08.2026 ──────────────
   Anasayfa.razor.css'te .modul-kart zemini sabit `white`, bağlantı yazısı sabit
   #334155 ve hover'ı `color-mix(..., white)`. Bu üçü de tema değişkeni kullanmıyor,
   bu yüzden koyu temada "Hızlı Erişim" bölümü bembeyaz bloklar halinde kalıyordu.
   Scoped CSS (SuperFly.Shared.styles.css) app.css'ten SONRA yüklendiği ve
   özgüllükler eşit olduğu için !important şart — .dash-card / .hizli-bar-btn
   için yukarıda kullanılan desenin aynısı. */
/* 27.08.2026: gölgeler kaldırıldı — açık temada da kaldırıldı, iki temanın
   kart dili ayrışmasın (bkz. Anasayfa.razor.css/.modul-kart). Hover geri
   bildirimi artık kenarlık renginde. */
[data-theme="dark"] .modul-kart {
    background: var(--fly-panel) !important;
    border-color: var(--fly-line) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .modul-kart:hover {
    border-color: color-mix(in srgb, var(--mk, var(--fly-accent)) 55%, var(--fly-line)) !important;
}
[data-theme="dark"] .modul-links a {
    color: var(--fly-txt-dim) !important;
}
[data-theme="dark"] .modul-links a:hover {
    background: color-mix(in srgb, var(--mk, var(--fly-accent)) 22%, var(--fly-panel2)) !important;
    color: var(--fly-txt) !important;
}

/* Hızlı aksiyon barı ikon kutusu — color-mix(..., white) koyu temada beyazlıyordu */
[data-theme="dark"] .hbb-icon {
    background: color-mix(in srgb, var(--btn-color, var(--fly-accent)) 26%, var(--fly-panel2)) !important;
}

/* Anasayfa'da sabit #64748B kalmış sönük etiketler — koyu zeminde ~3.7:1 kontrast,
   WCAG AA (4.5:1) altı. --fly-txt-mute koyu temada #7C8CA6 (~5.2:1). */
[data-theme="dark"] .section-label,
[data-theme="dark"] .kritik-kodu,
[data-theme="dark"] .kritik-min,
[data-theme="dark"] .akt-ci-zaman,
[data-theme="dark"] .akt-ci-aciklama,
[data-theme="dark"] .uyari-vade-baslik,
[data-theme="dark"] .sistem-lbl {
    color: var(--fly-txt-mute) !important;
}

/* Accent buton — btn-sm ile styled butonlar */
[data-theme="dark"] .btn-outline-secondary {
    color: var(--fly-txt-dim);
    border-color: var(--fly-line);
}

/* skeleton dark */
[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, var(--fly-panel) 25%, var(--fly-panel2) 50%, var(--fly-panel) 75%) !important;
    background-size: 200% 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SCROLLBAR (global)
   ═══════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--fly-scroll-thumb); border-radius: 4px; }
* { scrollbar-width: thin; scrollbar-color: var(--fly-scroll-thumb) transparent; }

/* ═══════════════════════════════════════════════════════════════════
   BLAZOR HATA / DOĞRULAMA
   ═══════════════════════════════════════════════════════════════════ */
h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--fly-success); }
.invalid { outline: 1px solid var(--fly-error); }
.validation-message { color: var(--fly-error); }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after { content: "Bir hata oluştu."; }

.darker-border-checkbox.form-check-input { border-color: #929292; }

.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder { color: var(--fly-txt-mute); text-align: end; }

.form-floating>.form-control-plaintext:focus::placeholder,
.form-floating>.form-control:focus::placeholder { text-align: start; }

/* ═══════════════════════════════════════════════════════════════════
   RENK SEÇICI (tema seçim paneli)
   ═══════════════════════════════════════════════════════════════════ */
.fly-theme-picker {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
}

.fly-color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: .15s;
}

.fly-color-swatch.active,
.fly-color-swatch:hover {
    border-color: #fff;
    transform: scale(1.15);
}

/* ═══════════════════════════════════════════════════════════════════
   ANİMASYONLAR
   ═══════════════════════════════════════════════════════════════════ */
/* 09.08.2026: "transform" içeren bir keyframe, .fly-content'i (position:fixed
   torunları için) yeni bir containing block'a çeviriyordu. Etkisi: Bootstrap
   modal'ları (position:fixed) artık viewport'a değil .fly-content'e göre
   konumlanıyor VE .fly-content'in kendi z-index'i (auto) .fly-topbar'ın
   z-index:100'ünün altında kaldığı için modal başlığı üst menünün ARKASINDA
   render ediliyordu (Opsiyon Ekle modalı raporu). transform kaldırıldı,
   sadece opacity animasyonu kaldı — modal'lar artık viewport'a göre doğru
   konumlanıyor. Bu TÜM modallar için geçerli bir düzeltmeydi, tek sayfaya
   özel değil. */
@keyframes fly-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.fly-fade { animation: fly-fade-in 0.25s ease; }

/* Menü ok geçişi */
.menu-arrow { transition: transform 0.25s ease; }
.menu-arrow.rotated { transform: rotate(180deg); }

/* Nav link geçiş */
.nav-link { transition: all 0.15s ease; }

/* ═══════════════════════════════════════════════════════════════════
   BİLDİRİM (TOAST) DURUM RENKLERİ                        06.08.2026
   ───────────────────────────────────────────────────────────────────
   Doğrulama uyarıları (ör. "Ünvan zorunludur", "Stok adı boş
   bırakılamaz") bootstrap'ın varsayılan beyaz toast'ıyla çıkıyordu ve
   kasa ekranında fark edilmiyordu. Hata bildirimleri artık koyu
   kırmızı zemin + beyaz yazı ve kısa bir sarsıntı ile gösteriliyor.
   Sınıflar ToastShow(...) içinden eklenip kaldırılır; toast markup'ı
   sayfalarda olduğu gibi kalır.
   ═══════════════════════════════════════════════════════════════════ */
.toast.fly-toast-hata {
    background: #b91c1c !important;
    color: #fff !important;
    border: 1px solid #7f1d1d !important;
    box-shadow: 0 10px 30px rgba(185, 28, 28, .45);
    animation: fly-toast-sars .35s ease;
}

.toast.fly-toast-hata .toast-body { color: #fff !important; font-weight: 600; }

.toast.fly-toast-ok {
    background: #15803d !important;
    color: #fff !important;
    border: 1px solid #14532d !important;
}

.toast.fly-toast-ok .toast-body { color: #fff !important; }

/* Koyu zeminde varsayılan (siyah) kapatma çarpısı görünmüyor */
.toast.fly-toast-hata .btn-close,
.toast.fly-toast-ok .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

@keyframes fly-toast-sars {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-7px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(3px); }
}

/* ═══════════════════════════════════════════════════════════════════
   POS "CHROME" RENKLERİ                                   06.08.2026
   ───────────────────────────────────────────────────────────────────
   Satış ekranlarındaki grup sütunu, fiş başlığı ve modal başlığı gibi
   koyu panellerin zemini --fly-panel2 idi. --fly-panel2 açık temada
   #F1F5F9'a (neredeyse beyaz) dönüyor, ama bu panellerin YAZI rengi
   koda color:#fff olarak sabitlenmişti → açık temada beyaz zeminde
   beyaz yazı, yani görünmez başlıklar.
   Kenar çubuğunun açık temada da koyu kalması gibi (bkz. --fly-sidebar-*),
   bu paneller de her iki temada koyu kalır; yazı sabit açık tonlardadır.
   ═══════════════════════════════════════════════════════════════════ */
:root,
[data-theme="dark"],
[data-theme="light"] {
    --fly-pos-chrome:      #172033;
    --fly-pos-chrome-2:    #111a2e;
    --fly-pos-chrome-txt:  #FFFFFF;
    --fly-pos-chrome-dim:  #C3CBDB;
    --fly-pos-chrome-mute: #98A2B8;
    --fly-pos-chrome-line: rgba(255,255,255,.12);
}

/* ═══════════════════════════════════════════════════════════════════
   ÜST MENÜ DROPDOWN — TAŞMA / KAYDIRMA                    15.08.2026
   ───────────────────────────────────────────────────────────────────
   .fly-app "height:100vh; overflow:hidden" olduğu için SAYFA hiç
   kaydırılamıyor. .fly-dropdown'ın da yükseklik sınırı yoktu; uzun
   menüler (ör. Raporlar açıkken) küçük ekranlarda ekranın altından
   taşıyor ve taşan kısma hiçbir şekilde ulaşılamıyordu.
   Çözüm: panelin KENDİSİ kaydırılabilir olsun ve viewport'u aşmasın.
   100dvh, mobil tarayıcılarda adres çubuğu gizlenip açılırken 100vh'nin
   yanlış (fazla) ölçmesini engeller; desteklemeyen tarayıcı ilk satırdaki
   100vh değerinde kalır.
   ═══════════════════════════════════════════════════════════════════ */
.fly-dropdown {
    max-height: calc(100vh - 70px);
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Dar ekran: panel butona göre değil, EKRANA göre konumlanır; böylece
   sağdaki menü grupları sağa, alttakiler aşağı taşıp kırpılmaz.
   "!important" gerekli: hesap menüsü panelinde inline style ile
   "right:0; left:auto; min-width:230px" veriliyor (MainLayout.razor). */
@media (max-width: 991.98px) {
    .fly-topbar {
        height: auto;
        min-height: 56px;
        flex-wrap: wrap;
        align-content: flex-start;
        row-gap: 4px;
        padding: 6px 8px;
        overflow: visible;
    }

    .fly-topbar-brand {
        margin-right: 0;
        padding-right: 8px;
    }

    .fly-topbar-brand small {
        display: none;
    }

    .fly-topbar-actions {
        margin-left: auto;
    }

    .fly-topnav {
        order: 3;
        flex: 0 0 100%;
        width: 100%;
        height: 42px;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: thin;
        scrollbar-color: var(--fly-sidebar-active-border) transparent;
        -webkit-overflow-scrolling: touch;
    }

    .fly-topnav::-webkit-scrollbar {
        height: 6px;
    }

    .fly-topnav::-webkit-scrollbar-track {
        background: transparent;
    }

    .fly-topnav::-webkit-scrollbar-thumb {
        background: var(--fly-sidebar-active-border);
        border-radius: 999px;
    }

    .fly-topnav-btn {
        padding: 8px 10px;
    }

    .fly-dropdown {
        position: fixed;
        top: 104px;
        left: 8px !important;
        right: 8px !important;
        width: auto;
        min-width: 0 !important;
        max-height: calc(100vh - 112px);
        max-height: calc(100dvh - 112px);
    }

    .fly-nav-link,
    .fly-nav-baslik {
        white-space: normal;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   EKSİK BOOTSTRAP UTILITY'Sİ                              28.08.2026
   ───────────────────────────────────────────────────────────────────
   Projede 5 sayfada `badge bg-success bg-opacity-15 text-success`
   kalıbı kullanılıyor. Bootstrap 5.3 bg-opacity ölçeği yalnızca
   10/25/50/75/100 üretir — `bg-opacity-15` DİYE BİR SINIF YOK.
   Tanımsız sınıf sessizce yok sayıldığı için --bs-bg-opacity 1'de
   kalıyor ve rozet DOLU yeşil/kırmızı zemin + aynı renk yazıyla,
   yani okunamaz halde çıkıyordu (her iki temada da).
   Bootstrap'ın kendi utility'leri gibi !important ile tanımlandı.
   ═══════════════════════════════════════════════════════════════════ */
.bg-opacity-15 { --bs-bg-opacity: .15 !important; }