/* =========================================================
   Modern Dashboard Theme (site.css)
   ========================================================= */

/* 1) FONT + TİPOGRAFİ */
@font-face {
    font-family: InterVarLocal;
    src: local("Inter");
    font-display: swap;
}

:root {
    --font-sans: Inter, InterVarLocal, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

html {
    font-size: 14px;
}

@media (min-width:768px) {
    html {
        font-size: 16px;
    }
}

body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-bottom: 60px;
}

html, body {
    height: 100%;
    overflow-x: hidden;
}

/* 2) RENK SİSTEMİ (Açık tema) */
:root {
    /* Marka renkleri */
    --brand: #4f46e5;
    --brand-600: #4f46e5;
    --brand-500: #6366f1;
    --brand-400: #818cf8;
    --brand-300: #a5b4fc;
    /* Yüzey & metin */
    --bg: #f6f7fb;
    --card: #ffffff;
    --fg: #101828;
    --muted: #667085;
    --border: #e6e7eb;
    /* Durumlar */
    --success: #16a34a;
    --info: #06b6d4;
    --warning: #f59e0b;
    --danger: #ef4444;
    /* Bootstrap eşlemeleri */
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--fg);
    --bs-primary: var(--brand);
    --bs-success: var(--success);
    --bs-info: var(--info);
    --bs-warning: var(--warning);
    --bs-danger: var(--danger);
    --bs-border-color: var(--border);
}

a {
    color: var(--brand-600);
}

    a:hover {
        color: var(--brand-400);
    }

.text-muted, .text-secondary {
    color: var(--muted) !important;
}

/* 3) KOYU TEMA (istemci tercihi) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b0f17;
        --card: #0f1623;
        --fg: #eef2f6;
        --muted: #9aa4b2;
        --border: #1d2533;
        --brand-600: #6366f1;
        --brand-500: #7c83ff;
        --brand-400: #98a2ff;
        --brand-300: #b8c0ff;
        --success: #22c55e;
        --info: #22d3ee;
        --warning: #fbbf24;
        --danger: #f43f5e;
        --bs-body-bg: var(--bg);
        --bs-body-color: var(--fg);
        --bs-border-color: var(--border);
    }
}

/* 4) FOCUS HALKASI */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .15rem rgba(99,102,241,.25),0 0 0 .25rem rgba(99,102,241,.12);
    border-color: var(--brand-400);
}

/* 5) TOPBAR (opsiyonel) */
#topbar {
    position: sticky;
    top: 0;
    z-index: 1028;
    background: linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.65));
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}

@media (prefers-color-scheme: dark) {
    #topbar {
        background: linear-gradient(180deg,rgba(15,22,35,.85),rgba(15,22,35,.65));
    }
}

#topbar .input-group {
    max-width: 360px;
}

#topbar .form-control::placeholder {
    color: var(--muted);
    opacity: .9;
}

/* 6) KARTLAR */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(2,6,23,.04);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
}

.card-footer {
    background: transparent;
    border-top: 1px solid var(--border);
}

.card-header .btn-group {
    flex-wrap: wrap;
    gap: .25rem;
}

/* 7) KPI KARTLARI */
.kpi {
    border: 0;
    overflow: hidden;
    color: #fff;
}

    .kpi .subtitle {
        color: rgba(255,255,255,.9);
        opacity: .9;
    }

    .kpi .icon-wrap {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border-radius: 12px;
        background: rgba(255,255,255,.2);
    }

.kpi-grad-1 {
    background: linear-gradient(135deg,var(--brand-600),var(--brand-300));
}

.kpi-grad-2 {
    background: linear-gradient(135deg,var(--success),#6ee7b7);
}

.kpi-grad-3 {
    background: linear-gradient(135deg,var(--info),#7dd3fc);
}

.kpi-grad-4 {
    background: linear-gradient(135deg,var(--warning),#fde68a);
    color: #111827;
}

.badge-on-dark {
    background: rgba(255,255,255,.22);
    color: #fff;
    border: 1px solid rgba(255,255,255,.35);
    backdrop-filter: saturate(120%) blur(2px);
}

.badge-soft-up {
    background: rgba(22,163,74,.15);
    color: var(--success);
}

.badge-soft-down {
    background: rgba(239,68,68,.15);
    color: var(--danger);
}

/* 8) TABLO */
.table-modern thead th {
    white-space: nowrap;
}

.table-compact {
    font-size: .875rem;
}

    .table-compact th, .table-compact td {
        padding: .45rem .6rem;
    }

.table-modern tbody tr:hover {
    background: rgba(99,102,241,.04);
}

.table-modern .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .8rem;
    background: var(--bg);
    color: var(--fg);
}

.table-modern .status-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    display: inline-block;
    margin-right: .35rem;
}

.table-modern .tag {
    background: var(--bg);
    border-radius: 999px;
    padding: .15rem .5rem;
    font-size: .75rem;
}

@media (max-width:768px) {
    .col-md-only {
        display: none;
    }
}

/* 9) LİSTELER (Top Kayıtlar) */
.list-compact .list-group-item {
    padding: .5rem .75rem;
}

.list-compact .rank {
    width: 1.6rem;
}

/* 10) GRAFİK BOYUTLARI */
.chart-340 {
    height: 340px;
}

.chart-360 {
    height: 360px;
}

@media (max-width:576px) {
    .chart-340 {
        height: 260px;
    }

    .chart-360 {
        height: 280px;
    }
}

/* 11) BUTON & FORM */
.btn {
    --bs-btn-border-radius: .75rem;
}

.btn-outline-secondary:hover {
    background: rgba(0,0,0,.04);
}

.input-group .input-group-text {
    background: var(--bg);
    border-color: var(--border);
}

.form-control {
    border-color: var(--border);
    background: #fff;
}

@media (prefers-color-scheme: dark) {
    .form-control {
        background: #0f1623;
        color: var(--fg);
    }
}

/* =========================================================
   FINAL SIDEBAR THEME (açık zemin + #5b6b79 metin)
   Eski sidebar CSS'lerini kaldır: #sidebar, .sidebar-sub, .submenu-flyout,
   .sidebar-overlay, #sidebar.collapsed, #sidebar.mobile, #content marj vb.
   ========================================================= */
:root {
    --sidebar-width: 260px;
    --sidebar-bg: #f7f9fc; /* beyaza yakın zemin */
    --sidebar-fg: #5b6b79; /* metin rengi */
    --sidebar-border: #e9edf3;
    --sidebar-hover: rgba(99,102,241,.06);
    --sidebar-active-bg: #eef2ff;
}

/* İskelet */
#sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    z-index: 1030;
    transition: width .2s ease, transform .2s ease;
}
    /* Linkler */
    #sidebar .nav-link {
        color: var(--sidebar-fg);
        border-radius: .5rem;
    }

        #sidebar .nav-link .bi {
            color: var(--sidebar-fg);
            opacity: .9;
        }

        #sidebar .nav-link:hover {
            background: var(--sidebar-hover);
            color: var(--brand-600);
        }

        #sidebar .nav-link.active {
            background: var(--sidebar-active-bg);
            color: var(--brand-600);
        }

            #sidebar .nav-link.active .bi {
                color: var(--brand-600);
            }

    /* Marka yazısı/ikon */
    #sidebar .brand-text {
        transition: opacity .15s;
        white-space: nowrap;
    }

    #sidebar.collapsed {
        --sidebar-width: 72px;
    }

        #sidebar.collapsed .brand-text, #sidebar.collapsed .sidebar-text {
            display: none;
        }

        #sidebar.collapsed .nav-link {
            justify-content: center;
        }

/* Alt menü (sidebar içi) */
.sidebar-sub {
    margin: .25rem 0 0 .25rem;
    padding-left: .5rem;
    border-left: 1px dashed var(--sidebar-border);
}

    .sidebar-sub .nav-link {
        color: var(--sidebar-fg);
    }

        .sidebar-sub .nav-link:hover {
            background: var(--sidebar-hover);
            color: var(--brand-600);
        }

/* Mobil (offcanvas benzeri) */
#sidebar.mobile {
    position: fixed;
    inset: 0 auto 0 0;
    width: 260px !important;
    transform: translateX(-100%);
    overflow-y: auto;
    background: var(--sidebar-bg);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.25);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

    #sidebar.mobile:not(.collapsed) {
        transform: translateX(0);
    }

/* İçerik ve overlay */
#content {
    transition: margin-left .2s ease;
}
/* marj davranışını JS/CSS ile yönetebilirsin */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s;
    z-index: 1029;
}

    .sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }

/* Collapsed flyout (alt menüler yandan) */
.submenu-flyout {
    position: fixed;
    left: 72px;
    top: 80px;
    min-width: 240px;
    max-width: 320px;
    max-height: calc(100vh - 16px);
    overflow: auto;
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
    border: 1px solid var(--sidebar-border);
    border-radius: .75rem;
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.15);
    padding: .5rem;
    z-index: 1040;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease;
}

    .submenu-flyout.show {
        opacity: 1;
        transform: translateY(0);
    }

    .submenu-flyout .nav {
        gap: .25rem;
    }

    .submenu-flyout .nav-link {
        color: var(--sidebar-fg) !important;
        border-radius: .5rem;
    }

        .submenu-flyout .nav-link:hover {
            background: var(--sidebar-hover);
            color: var(--brand-600) !important;
        }

    .submenu-flyout .bi {
        color: var(--sidebar-fg);
        opacity: .8;
    }

/* ---- Sidebar Kurtarma Override'ı ---- */
#sidebar {
    background: var(--sidebar-bg) !important;
    color: var(--sidebar-fg) !important;
    border-right: 1px solid var(--sidebar-border) !important;
}

    #sidebar .nav-link,
    #sidebar .nav-link .bi {
        color: var(--sidebar-fg) !important;
    }

        #sidebar .nav-link:hover {
            background: var(--sidebar-hover) !important;
            color: var(--brand-600) !important;
        }

        #sidebar .nav-link.active {
            background: var(--sidebar-active-bg) !important;
            color: var(--brand-600) !important;
        }

            #sidebar .nav-link.active .bi {
                color: var(--brand-600) !important;
            }

    /* Alt menü */
    #sidebar .sidebar-sub .nav-link {
        color: var(--sidebar-fg) !important;
    }

        #sidebar .sidebar-sub .nav-link:hover {
            background: var(--sidebar-hover) !important;
            color: var(--brand-600) !important;
        }

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" / >
<link rel="stylesheet" href="~/Mudem.Web.styles.css" asp-append-version="true" / >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" / >
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" / > <!-- EN SON -->