body {
    font-size: .875rem;
    background-color: #f8f9fa;
}

:root {
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 68px;
}

.nav-link {
    padding: .5rem 1rem;
    border-radius: .25rem;
    transition: all .2s;
}

.nav-link:hover {
    background-color: rgba(255,255,255,.1);
}

.card {
    border-radius: .5rem;
}

.table > :not(caption) > * > * {
    vertical-align: middle;
}

.badge {
    font-size: .8rem;
}

.btn-sm {
    padding: .2rem .5rem;
}

/* ─── Thin Modern Scrollbar ─── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}
main {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 transparent;
}

/* ─── Sidebar ─── */
.sidebar-offcanvas {
    --bs-offcanvas-width: var(--sidebar-width);
    border: none;
}

.sidebar-offcanvas .nav-link.active {
    background-color: #0d6efd;
    color: #fff;
}

@media (min-width: 768px) {
    .sidebar-offcanvas {
        position: sticky !important;
        top: 0;
        height: 100vh;
        transform: none !important;
        visibility: visible !important;
        z-index: auto;
        flex-shrink: 0;
        background-color: #212529 !important;
        width: var(--sidebar-width);
        min-width: var(--sidebar-collapsed-width);
        transition: width .25s ease;
    }
    .sidebar-offcanvas .btn-close {
        display: none;
    }
    .sidebar-toggle {
        display: none !important;
    }

    /* ── Collapsed (icon rail) ── */
    #appShell.sidebar-collapsed .sidebar-offcanvas {
        width: var(--sidebar-collapsed-width);
    }
    #appShell.sidebar-collapsed .sidebar-offcanvas .offcanvas-header {
        justify-content: center;
        padding: 1rem .375rem;
    }
    #appShell.sidebar-collapsed .sidebar-offcanvas .sidebar-brand-text {
        display: none;
    }
    #appShell.sidebar-collapsed .sidebar-offcanvas .offcanvas-body {
        padding: 1rem .375rem;
    }
    #appShell.sidebar-collapsed .sidebar-offcanvas .sidebar-section-title {
        display: none;
    }
    #appShell.sidebar-collapsed .sidebar-offcanvas .nav-link {
        font-size: 0;
        line-height: 0;
        text-align: center;
        padding: .6rem 0;
    }
    #appShell.sidebar-collapsed .sidebar-offcanvas .nav-link i {
        font-size: 1.15rem;
        line-height: 1;
    }
}

@media (max-width: 767.98px) {
    main > .p-4 {
        padding: 1rem !important;
    }
    .table-responsive-sm {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}