/*
 * admin.css v3 — AdminLTE 4 üzerine projeye özel katman
 * Yükleme: bootstrap.min.css → adminlte.min.css → admin.css
 * Bu dosya ESKİ admin.css'i TAMAMEN REPLACE eder.
 */

/* ═══════════════════════════════════════════════════════════════
   1. LAYOUT RESET — eski sistem çakışmalarını sıfırla
═══════════════════════════════════════════════════════════════ */
html, body {
    width: 100% !important;
    overflow-x: hidden;
}

body {
    display: block !important; /* eski body{display:flex}'i ezer */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    min-height: 100vh;
}
/* Eski layout kalıntıları */
#sidebar, #main-content, .sidebar-overlay, #topbar {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   2. ADMINLTE GRID — tam genişlik garantisi
   AdminLTE app-wrapper: display:grid, grid-template-columns:auto 1fr
   'auto' = sidebar genişliği (normal: --lte-sidebar-width ~250px,
             mini: ~4.6rem), '1fr' = kalan her şey.
   Sorun: eski body{display:flex} grid'i bozuyor → yukarıda fixlendi.
═══════════════════════════════════════════════════════════════ */
.app-wrapper {
    width: 100% !important;
    box-sizing: border-box !important;
    /* grid-template-columns'u sıfırlama — AdminLTE kendi yönetiyor */
}
/* app-main ve app-header grid hücrelerinde taşmayı önle */
.app-main {
    min-width: 0;
    overflow-x: hidden;
}

.app-header {
    min-width: 0;
}
/* NOT: min-width:0 !important KULLANMA — header'ı küçültür */

/* app-content padding */
.app-content {
    padding: 20px 24px 24px !important;
}

/* ═══════════════════════════════════════════════════════════════
   3. CSS DEĞİŞKENLERİ
═══════════════════════════════════════════════════════════════ */
:root,
[data-theme="light"],
[data-bs-theme="light"] {
    --accent: #185FA5;
    --accent-light: #E6F1FB;
    --accent-text: #185FA5;
    --text-muted: #6b7280;
    --text-primary: #111827;
    --border-c: #e5e7eb;
    --body-bg: #f4f6f9;
    --card-bg: #ffffff;
    --nav-hover: #f3f4f6;
    --input-bg: #ffffff;
    --input-border: #e5e7eb;
    --stat-card-bg: #ffffff;
    --table-header-bg: #f9fafb;
    --border-radius-lg: 10px;
}

[data-theme="dark"],
[data-bs-theme="dark"] {
    --accent: #4d9de0;
    --accent-light: #1a2d42;
    --accent-text: #7ab8f0;
    --text-muted: #8b95a1;
    --text-primary: #e8eaf0;
    --border-c: #2d3139;
    --body-bg: #0f1117;
    --card-bg: #1a1d23;
    --nav-hover: #23272f;
    --input-bg: #23272f;
    --input-border: #2d3139;
    --stat-card-bg: #1a1d23;
    --table-header-bg: #23272f;
    --bs-body-color: #e8eaf0;
    --bs-body-bg: #0f1117;
    --bs-border-color: #2d3139;
}

/* ═══════════════════════════════════════════════════════════════
   4. TEMA GEÇİŞ ANİMASYONU
═══════════════════════════════════════════════════════════════ */
body, body * {
    transition: background-color .2s, border-color .2s, color .15s;
}

.app-sidebar, .app-header, canvas, .modal, .dropdown-menu {
    transition: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   5. TOPBAR
═══════════════════════════════════════════════════════════════ */

/* Merkezi arama kutusu */
.search-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    border-radius: 8px;
    border: 1px solid var(--border-c, #e5e7eb);
    background: var(--bs-body-bg, #f9fafb);
    color: var(--text-muted, #6b7280);
    font-size: 13px;
    cursor: pointer;
    width: 100%;
    max-width: 440px;
    transition: border-color .15s, box-shadow .15s;
}

    .search-trigger:hover,
    .search-trigger:focus {
        outline: none;
        border-color: var(--accent, #185FA5);
        box-shadow: 0 0 0 3px rgba(24,95,165,.12);
    }

    .search-trigger kbd {
        margin-left: auto;
        font-size: 11px;
        padding: 1px 6px;
        border-radius: 4px;
        border: 1px solid var(--border-c, #e5e7eb);
        background: transparent;
        color: var(--text-muted, #9ca3af);
    }

/* Sağ ikon butonları */
.topbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted, #6b7280);
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}

    .topbar-btn:hover {
        background: var(--nav-hover, #f3f4f6);
        color: var(--text-primary, #111827);
    }

[data-bs-theme="dark"] .topbar-btn:hover {
    background: #23272f;
    color: #e8eaf0;
}

/* Kullanıcı butonu */
.topbar-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background .15s;
}

    .topbar-user-btn:hover {
        background: var(--nav-hover, #f3f4f6);
    }

[data-bs-theme="dark"] .topbar-user-btn:hover {
    background: #23272f;
}

/* Avatar küçük */
.topbar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent, #185FA5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

/* Avatar büyük (dropdown başlık) */
.topbar-avatar-lg {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    border: 2px solid rgba(255,255,255,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

/* Dropdown başlık */
.user-header-panel {
    background: var(--accent, #185FA5);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   6. SIDEBAR MARKA
═══════════════════════════════════════════════════════════════ */
.lte-brand-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--accent, #185FA5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    flex-shrink: 0;
}

.brand-link {
    display: flex !important;
    align-items: center;
    padding: 12px 16px !important;
    text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   7. PAGE HEADER
═══════════════════════════════════════════════════════════════ */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.page-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary, #111827);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   8. KART
═══════════════════════════════════════════════════════════════ */
.card {
    border-radius: var(--border-radius-lg);
    border-color: var(--border-c);
}

.card-header {
    font-size: 13px;
    font-weight: 600;
    background: var(--card-bg);
    border-bottom-color: var(--border-c);
    padding: 12px 16px;
}

.card-body, .card-footer {
    background: var(--card-bg);
}
/* ── text-bg-* ve inline renkli kartlar — admin.css override'ından muaf ──
   Bootstrap'in .text-bg-* sınıfları (text-bg-primary, text-bg-dark vb.)
   ve inline style ile renk verilmiş kartlar, admin.css'in
   card-body { background: var(--card-bg) } kuralından muaf tutulur.
   Aksi halde kart arka planı beyaza döner, yazı görünmez.
─────────────────────────────────────────────────────────────────────── */
.text-bg-primary > .card-body, .text-bg-primary > .card-body *,
.text-bg-success > .card-body, .text-bg-success > .card-body *,
.text-bg-danger > .card-body, .text-bg-danger > .card-body *,
.text-bg-warning > .card-body, .text-bg-warning > .card-body *,
.text-bg-info > .card-body, .text-bg-info > .card-body *,
.text-bg-dark > .card-body, .text-bg-dark > .card-body *,
.text-bg-secondary > .card-body, .text-bg-secondary > .card-body * {
    background: transparent !important;
    color: inherit !important;
    border-color: rgba(255,255,255,.2) !important;
}
/* Inline style ile renk verilmiş kartlar (background:#... style attribute) */
.card[style*="background:"] > .card-body,
.card[style*="background: "] > .card-body {
    background: transparent !important;
    color: inherit !important;
}
/* small ve .text-muted elemanlar da beyaz olsun */
.text-bg-primary small, .text-bg-primary .text-muted,
.text-bg-success small, .text-bg-success .text-muted,
.text-bg-danger small, .text-bg-danger .text-muted,
.text-bg-warning small, .text-bg-warning .text-muted,
.text-bg-info small, .text-bg-info .text-muted,
.text-bg-dark small, .text-bg-dark .text-muted,
.text-bg-secondary small, .text-bg-secondary .text-muted {
    color: rgba(255,255,255,.8) !important;
}

.card-footer {
    border-top-color: var(--border-c);
}

/* ═══════════════════════════════════════════════════════════════
   9. TABLO
═══════════════════════════════════════════════════════════════ */
.table {
    font-size: 13px;
}

    .table thead th {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
        background: var(--table-header-bg);
        border-bottom-color: var(--border-c);
    }

    .table > :not(caption) > * > * {
        padding: 10px 12px;
    }

/* ═══════════════════════════════════════════════════════════════
   10. DARK MODE
═══════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] body {
    color: var(--text-primary);
    background: var(--body-bg);
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card-body,
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
    background: var(--card-bg);
    border-color: var(--border-c);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .table {
    color: var(--text-primary);
    --bs-table-bg: var(--card-bg);
    --bs-table-hover-bg: #23272f;
    --bs-table-border-color: var(--border-c);
}

    [data-bs-theme="dark"] .table thead th {
        background: var(--table-header-bg);
        color: var(--text-muted);
        border-color: var(--border-c);
    }

    [data-bs-theme="dark"] .table > :not(caption) > * > * {
        border-color: var(--border-c);
        color: var(--text-primary);
    }

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] input[type="text"],
[data-bs-theme="dark"] input[type="email"],
[data-bs-theme="dark"] input[type="password"],
[data-bs-theme="dark"] input[type="number"] {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

    [data-bs-theme="dark"] .form-control:focus,
    [data-bs-theme="dark"] .form-select:focus {
        background: var(--input-bg);
        color: var(--text-primary);
        border-color: var(--accent);
        box-shadow: 0 0 0 2px rgba(77,157,224,.2);
    }

[data-bs-theme="dark"] label, [data-bs-theme="dark"] .form-label {
    color: var(--text-muted);
}

[data-bs-theme="dark"] .modal-content {
    background: var(--card-bg);
    border-color: var(--border-c);
    color: var(--text-primary);
}

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

[data-bs-theme="dark"] .dropdown-menu {
    background: var(--card-bg);
    border-color: var(--border-c);
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}

    [data-bs-theme="dark"] .dropdown-item:hover {
        background: var(--nav-hover);
    }

[data-bs-theme="dark"] .alert-success {
    background: #1a2d1e;
    border-color: #2d4a32;
    color: #6bcf7f;
}

[data-bs-theme="dark"] .alert-danger {
    background: #2d1a1a;
    border-color: #4a2d2d;
    color: #f08080;
}

[data-bs-theme="dark"] .alert-warning {
    background: #2d2a1a;
    border-color: #4a432d;
    color: #e0c060;
}

[data-bs-theme="dark"] a {
    color: var(--accent-text);
}

    [data-bs-theme="dark"] a:hover {
        color: var(--accent);
    }

[data-bs-theme="dark"] .page-link {
    background: var(--card-bg);
    border-color: var(--border-c);
    color: var(--accent);
}

[data-bs-theme="dark"] .page-item.active .page-link {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

[data-bs-theme="dark"] .search-trigger {
    background: #1e2130;
    border-color: #2d3139;
    color: #8b95a1;
}

[data-bs-theme="dark"] .search-palette-box {
    background: #1e2130;
    border-color: #2d3139;
}

[data-bs-theme="dark"] .search-palette-input {
    color: #e8eaf0;
}

[data-bs-theme="dark"] .search-palette-item {
    color: #e8eaf0;
}

    [data-bs-theme="dark"] .search-palette-item:hover,
    [data-bs-theme="dark"] .search-palette-item.active {
        background: #1a2d42;
        color: #7ab8f0;
    }

/* ═══════════════════════════════════════════════════════════════
   11. STAT CARD
═══════════════════════════════════════════════════════════════ */
.stat-card {
    background: var(--stat-card-bg);
    border: 1px solid var(--border-c);
    border-radius: var(--border-radius-lg);
    padding: 14px 16px;
}

    .stat-card .stat-val {
        font-size: 24px;
        font-weight: 700;
        color: var(--text-primary);
        line-height: 1;
    }

    .stat-card .stat-lbl {
        font-size: 11px;
        color: var(--text-muted);
        margin-top: 4px;
    }

/* ═══════════════════════════════════════════════════════════════
   12. ARAMA PALETİ
═══════════════════════════════════════════════════════════════ */
.search-palette-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(4px);
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
}

    .search-palette-backdrop.show {
        display: flex;
    }

.search-palette-box {
    width: 100%;
    max-width: 580px;
    max-height: 72vh;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--border-c, #e5e7eb);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,.3);
    animation: paletteIn .15s ease;
}

@keyframes paletteIn {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.search-palette-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-c,#e5e7eb);
}

.search-palette-icon {
    font-size: 17px;
    color: var(--text-muted,#6b7280);
}

.search-palette-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    color: var(--text-primary,#111827);
}

    .search-palette-input::placeholder {
        color: var(--text-muted,#9ca3af);
    }

.search-palette-esc {
    padding: 2px 8px;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid var(--border-c,#e5e7eb);
    background: var(--bs-body-bg,#fff);
    color: var(--text-muted,#6b7280);
    font-size: 11px;
}

.search-palette-results {
    overflow-y: auto;
    flex: 1;
    padding: 6px 0;
}

.search-palette-group {
    padding: 8px 18px 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted,#9ca3af);
}

.search-palette-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    font-size: 13px;
    color: var(--text-primary,#111827);
    text-decoration: none;
    transition: background .1s;
}

    .search-palette-item:hover, .search-palette-item.active {
        background: var(--accent-light,#E6F1FB);
        color: var(--accent,#185FA5);
        text-decoration: none;
    }

.search-palette-item-icon {
    font-size: 14px;
    color: var(--text-muted,#6b7280);
    width: 16px;
    flex-shrink: 0;
}

.search-palette-item:hover .search-palette-item-icon, .search-palette-item.active .search-palette-item-icon {
    color: var(--accent,#185FA5);
}

.search-palette-enter {
    margin-left: auto;
    font-size: 12px;
    opacity: 0;
    color: var(--accent,#185FA5);
}

.search-palette-item.active .search-palette-enter {
    opacity: 1;
}

.search-palette-empty {
    padding: 28px;
    text-align: center;
    color: var(--text-muted,#9ca3af);
    font-size: 13px;
}

.search-palette-footer {
    display: flex;
    gap: 16px;
    padding: 8px 18px;
    border-top: 1px solid var(--border-c,#e5e7eb);
    font-size: 11px;
    color: var(--text-muted,#9ca3af);
}

/* ═══════════════════════════════════════════════════════════════
   13. LINK & SORTABLE
═══════════════════════════════════════════════════════════════ */
a {
    color: var(--accent-text);
    text-decoration: none;
    transition: color .15s;
}

    a:hover {
        color: var(--accent);
        text-decoration: underline;
        text-decoration-thickness: 1px;
    }

th.sortable {
    user-select: none;
    cursor: pointer;
}

    th.sortable:hover {
        background: rgba(24,95,165,.06);
    }

/* ═══════════════════════════════════════════════════════════════
   14. RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width:992px) {
    .app-content {
        padding: 16px !important;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width:768px) {
    .app-content {
        padding: 12px !important;
    }

    .page-title {
        font-size: 17px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR SABİT + TAM BOY ARKA PLAN
   
   İstenen davranış:
   - Sidebar ekranın solunda SABİT kalır (içerik scroll edilince bile)
   - Sol taraftaki koyu arka plan sayfa sonuna kadar UZANIR (kesilmez)
   - İçerik (sağ taraf) normal scroll edilir
   
   Teknik:
   - Sidebar: position:fixed (viewport'a sabitlenir)
   - app-main: margin-left ile sidebar genişliği kadar itilir
   - ::before pseudo ile sol taraf boydan boya koyu renk
═══════════════════════════════════════════════════════════════ */

@media (min-width: 992px) {

    /* Sidebar tamamen sabit — scroll edilmez, ekranda sabit kalır */
    .sidebar-expand-lg .app-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
        z-index: 1038;
        overflow: hidden;
    }

        /* Sidebar içi menü scroll edilebilir */
        .sidebar-expand-lg .app-sidebar .sidebar-wrapper {
            height: calc(100vh - 3.6rem) !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
        }

    /* Mini modda sidebar genişliği */
    .sidebar-expand-lg.sidebar-mini.sidebar-collapse .app-sidebar {
        width: 4.6rem !important;
        min-width: 4.6rem !important;
        max-width: 4.6rem !important;
    }

    /* Topbar ve main content — sidebar kadar sağa it */
    .sidebar-expand-lg .app-header {
        margin-left: var(--lte-sidebar-width, 250px) !important;
        width: calc(100% - var(--lte-sidebar-width, 250px)) !important;
        transition: margin-left .3s ease, width .3s ease;
    }

    .sidebar-expand-lg .app-main {
        margin-left: var(--lte-sidebar-width, 250px) !important;
        width: calc(100% - var(--lte-sidebar-width, 250px)) !important;
        transition: margin-left .3s ease, width .3s ease;
    }

    .sidebar-expand-lg .app-footer {
        margin-left: var(--lte-sidebar-width, 250px) !important;
        width: calc(100% - var(--lte-sidebar-width, 250px)) !important;
        transition: margin-left .3s ease, width .3s ease;
    }

    /* Mini mod — sidebar küçüldüğünde content genişler */
    .sidebar-expand-lg.sidebar-collapse .app-header,
    .sidebar-expand-lg.sidebar-collapse .app-main,
    .sidebar-expand-lg.sidebar-collapse .app-footer {
        margin-left: 4.6rem !important;
        width: calc(100% - 4.6rem) !important;
    }

    /* app-wrapper grid'i devre dışı — position:fixed ile kendi layout'umuzu kullanıyoruz */
    .sidebar-expand-lg .app-wrapper {
        display: block !important;
    }
}

/* Mobil — sidebar normal akışa döner */
@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100vh !important;
        max-height: 100vh !important;
        transform: translateX(-100%);
        transition: transform .3s ease !important;
        z-index: 1045;
    }

    .sidebar-open .app-sidebar {
        transform: translateX(0);
    }

    .app-header, .app-main, .app-footer {
        margin-left: 0 !important;
        width: 100% !important;
    }
}