/* =========================================================
   Modern Dashboard Theme (site.css) - CLEAN + CONSOLIDATED
   (Based on the CSS you shared)
   ========================================================= */

/* 1) FONT + TYPOGRAPHY */
@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";
    /* Brand */
    --brand: #4f46e5;
    --brand-600: #4f46e5;
    --brand-500: #6366f1;
    --brand-400: #818cf8;
    --brand-300: #a5b4fc;
    /* Surfaces */
    --bg: #f6f7fb;
    --card: #ffffff;
    --fg: #101828;
    --muted: #667085;
    --border: #e6e7eb;
    /* Status */
    --success: #16a34a;
    --info: #06b6d4;
    --warning: #f59e0b;
    --danger: #ef4444;
    /* Bootstrap mappings */
    --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);
    /* Layout */
    --sidebar-width: 260px;
    --sidebar-bg: #f7f9fc;
    --sidebar-fg: #5b6b79;
    --sidebar-border: #e9edf3;
    --sidebar-hover: rgba(99,102,241,.06);
    --sidebar-active-bg: #eef2ff;
    /* Scales / UI tokens */
    --fs-12: clamp(0.72rem, 0.65rem + 0.3vw, 0.80rem);
    --fs-13: clamp(0.78rem, 0.70rem + 0.3vw, 0.86rem);
    --fs-14: clamp(0.84rem, 0.76rem + 0.35vw, 0.95rem);
    --fs-16: clamp(0.95rem, 0.88rem + 0.35vw, 1.05rem);
    --fs-18: clamp(1.05rem, 0.98rem + 0.45vw, 1.20rem);
    --radius-10: 10px;
    --radius-12: 12px;
    --soft-border: rgba(0,0,0,.07);
    --soft-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* Dark scheme */
@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);
    }
}

/* Base sizing */
html {
    /* düşük çözünürlükte küçülür, büyük ekranda 16px'i geçmez */
    font-size: clamp(13px, 0.9vw + 10px, 16px);
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* tek otorite */
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-14);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* IMPORTANT: body margin-bottom kaldırıldı (sidebar hizasını bozuyordu) */
}

h1, h2, h3, h4, h5 {
    letter-spacing: -0.2px;
}

h4 {
    font-size: var(--fs-18);
}

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

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

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

/* 4) FOCUS RING */
.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 (optional) */
#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) CARDS */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(2,6,23,.04);
}

    .card.shadow-sm {
        box-shadow: var(--soft-shadow) !important;
    }

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
    border-top-left-radius: var(--radius-12);
    border-top-right-radius: var(--radius-12);
}

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

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

/* 7) KPI */
.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) TABLES (generic modern) */
.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) LISTS */
.list-compact .list-group-item {
    padding: .5rem .75rem;
}

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

/* 10) CHARTS */
.chart-340 {
    position: relative;
    height: 340px;
}

    .chart-340 canvas {
        display: block;
    }

.chart-360 {
    height: 360px;
}

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

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

/* 11) BUTTONS & FORMS (base harmony) */
.btn {
    --bs-btn-border-radius: .75rem;
    font-weight: 600;
    letter-spacing: -.1px;
}

.btn-primary,
.btn-outline-primary,
.btn-success,
.btn-outline-success,
.btn-danger,
.btn-outline-danger,
.btn-warning,
.btn-outline-warning,
.btn-info,
.btn-outline-info {
    transition: transform .08s ease, box-shadow .12s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.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);
    }
}

/* =========================================================
   LAYOUT - Sidebar + Content (single source of truth)
   Fix: sidebar vs content top/bottom alignment
   ========================================================= */

/* Flex içinde taşma/scroll hesapları için şart */
#content,
#content .container-fluid,
#content main {
    min-width: 0;
}

/* Wrapper */
.page-wrapper {
    min-height: 100vh;
    display: flex;
}

/* Sidebar */
#sidebar {
    width: var(--sidebar-width);
    height: 100vh; /* bottom hizasını kilitler */
    background: var(--sidebar-bg) !important;
    color: var(--sidebar-fg) !important;
    border-right: 1px solid var(--sidebar-border) !important;
    display: flex;
    flex-direction: column;
    z-index: 1030;
    transition: width .2s ease, transform .2s ease;
    margin: 0;
    padding: 0;
}

/* Content */
#content {
    flex: 1;
    min-height: 100vh;
    margin-left: var(--sidebar-width);
    transition: margin-left .2s ease;
}

    /* Footer boşluğu gerekiyorsa içerikte ver (eski body margin-bottom yerine) */
    #content main {
        padding-bottom: 60px;
    }

/* Sidebar links */
#sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .75rem;
    border-radius: .5rem;
    color: var(--sidebar-fg) !important;
    white-space: nowrap;
}

    #sidebar .nav-link .bi,
    #sidebar .flyout-trigger .bi {
        width: 1.25rem;
        min-width: 1.25rem;
        text-align: center;
        color: var(--sidebar-fg) !important;
        opacity: .9;
    }

    #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;
        position: relative;
    }

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

        /* Active link accent bar */
        #sidebar .nav-link.active::before {
            content: "";
            position: absolute;
            left: 0;
            top: 10%;
            bottom: 10%;
            width: 4px;
            border-radius: 4px;
            background: rgba(59,130,246,1);
        }

/* Brand text */
#sidebar .brand-text {
    transition: opacity .15s;
    white-space: nowrap;
}

/* Submenu */
.sidebar-sub {
    margin: .25rem 0 0 .75rem;
    padding-left: .75rem;
    border-left: none;
}

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

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

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

    #sidebar.collapsed .nav-link {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    /* Alt menü linkleri collapse'da ikon merkezine uysun */
    #sidebar.collapsed .sidebar-sub-link {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

        #sidebar.collapsed .sidebar-sub-link .bi {
            margin: 0 !important;
        }

    /* Collapsed caret hide */
    #sidebar.collapsed .flyout-trigger > i.bi-caret-down-fill {
        display: none !important;
    }

    /* Collapsed sidebar içi submenu kapat */
    #sidebar.collapsed .sidebar-sub,
    #sidebar.collapsed .sidebar-subtitle {
        display: none;
    }

    /* Collapsed flyout trigger align */
    #sidebar.collapsed .flyout-trigger {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

        #sidebar.collapsed .flyout-trigger > span {
            justify-content: center !important;
            gap: 0 !important;
        }

    /* Tooltip for collapsed */
    #sidebar.collapsed a.nav-link {
        position: relative;
    }

        #sidebar.collapsed a.nav-link::after {
            content: attr(data-title);
            position: absolute;
            left: calc(100% + 10px);
            top: 50%;
            transform: translateY(-50%);
            white-space: nowrap;
            background: rgba(17,24,39,.95);
            color: #fff;
            font-size: .85rem;
            padding: .35rem .55rem;
            border-radius: 10px;
            box-shadow: 0 10px 22px rgba(0,0,0,.25);
            opacity: 0;
            pointer-events: none;
            transition: opacity .12s ease;
        }

        #sidebar.collapsed a.nav-link:hover::after {
            opacity: 1;
        }

/* Special submenu line removal */
#menuUsersRoles .sidebar-sub,
#menuDefinitions .sidebar-sub {
    border-left: none !important;
}

/* Mobile (offcanvas-like) */
#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);
    }

/* Overlay */
.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 (submenu 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;
    }

@media (max-width: 767.98px) {
    #content {
        margin-left: 0 !important;
    }
}

/* =========================================================
   PAGE / TABLE / ACTIONS STANDARDS
   ========================================================= */

/* Page header standard */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1rem;
}

.page-title {
    margin: 0;
}

/* Optional: alert standard */
.app-alert i {
    margin-right: .35rem;
}

/* Table standards */
.app-table-wrap {
    width: 100%;
}

.app-table th,
.app-table td {
    white-space: nowrap;
}

.app-table td {
    vertical-align: middle;
}

/* Actions column width */
.col-actions {
    width: 360px;
}

/* Actions group */
.app-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .25rem;
}

/* Empty state */
.app-empty {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Dashboard Table Standards (single definition) */
.table-dashboard {
    font-size: var(--fs-13);
}

    .table-dashboard thead th {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        font-size: var(--fs-12);
        font-weight: 600;
        color: rgba(0,0,0,.65);
        background-color: #f8f9fa;
        border-bottom: 1px solid var(--soft-border) !important;
        white-space: nowrap;
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .table-dashboard tbody td {
        padding-top: .85rem !important;
        padding-bottom: .85rem !important;
        padding-left: .75rem;
        padding-right: .75rem;
        vertical-align: middle;
        border-top: 1px solid rgba(0,0,0,.05);
        max-width: 280px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .table-dashboard tbody tr:hover {
        background: rgba(0,0,0,.02);
    }

@media (max-width: 768px) {
    .table-dashboard {
        font-size: var(--fs-12);
    }

        .table-dashboard thead th,
        .table-dashboard tbody td {
            padding-top: .65rem !important;
            padding-bottom: .65rem !important;
            padding-left: .6rem;
            padding-right: .6rem;
        }
}

/* Action Buttons - Icon Only (single definition) */
.btn-action {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    border-radius: 10px;
    transition: transform .08s ease, box-shadow .12s ease, background-color .12s ease;
    border: 1px solid rgba(0,0,0,.12);
    background-color: #fff;
    color: #6c757d;
    user-select: none;
}

    .btn-action i {
        font-size: 1rem;
        line-height: 1;
    }

    .btn-action:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(0,0,0,.08);
    }

    .btn-action:active {
        transform: translateY(0);
        box-shadow: none;
    }

    .btn-action:focus,
    .btn-action:focus-visible {
        outline: none;
        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);
    }

@media (max-width: 576px) {
    .btn-action {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }
}

/* Status Badges */
.badge-status {
    padding: 0.5em 1em;
    font-weight: 500;
    border-radius: 50px;
    font-size: var(--fs-12);
}

/* Role badge look */
.badge.bg-light.text-dark {
    font-size: var(--fs-12);
    font-weight: 600;
    padding: .35rem .55rem;
    border: 1px solid rgba(0,0,0,.10);
}

/* Utils */
.text-light-subtle {
    color: #e0e0e0 !important;
}

.fs-7 {
    font-size: var(--fs-12) !important;
}

/* Search input group (single definition) */
.search-input-group {
    max-width: 350px;
}

    .search-input-group .input-group-text.search-icon {
        background: #fff;
        border-right: 0;
        color: rgba(0,0,0,.55);
    }

    .search-input-group .form-control {
        border-left: 0;
        font-size: var(--fs-13);
        padding-top: .55rem;
        padding-bottom: .55rem;
    }

        .search-input-group .form-control:focus {
            border-color: var(--brand-400);
            box-shadow: 0 0 0 .15rem rgba(99,102,241,.25), 0 0 0 .25rem rgba(99,102,241,.12);
        }

    .search-input-group .input-group > .form-control,
    .search-input-group .input-group > .input-group-text,
    .search-input-group .input-group > .btn {
        border-color: rgba(0,0,0,.14);
    }

/* Narrow pages */
.page-narrow {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive header area spacing */
@media (max-width: 576px) {
    .d-flex.align-items-center.justify-content-between.mb-4 {
        gap: .75rem;
        flex-direction: column;
        align-items: flex-start !important;
    }

        .d-flex.align-items-center.justify-content-between.mb-4 .btn {
            width: 100%;
        }
}

/* =========================================================
   TABULATOR overrides (keep layout stable)
   ========================================================= */
#caseGrid .tabulator {
    font-size: 0.875rem;
}

#caseGrid .tabulator-row {
    display: flex !important;
    flex-wrap: nowrap !important;
}

#caseGrid .tabulator-cell {
    display: inline-flex !important;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    /* Actions cell visible + right aligned */
    #caseGrid .tabulator-cell.actions-col {
        justify-content: flex-end !important;
        overflow: visible !important;
    }

/* Buttons */
#caseGrid .grid-actions {
    display: inline-flex;
    gap: .25rem;
    white-space: nowrap;
}

    #caseGrid .grid-actions .btn {
        padding: .20rem .35rem;
        line-height: 1;
    }
@supports (height: 100dvh) {
    #sidebar {
        height: 100dvh;
        top: 0;
        bottom: auto;
    }

    #content {
        min-height: 100dvh;
    }
}
.auth-logo {
    max-height: 140px;
    max-width: 100%;
    object-fit: contain;
    display: block;
    background: transparent;
    mix-blend-mode: multiply;
}