body {
    background-image: url('image/body-bg-image.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed !important;
    min-height: 100vh;
    font-family: 'Inter', sans-serif !important;
    /* backdrop-filter: blur(15px); */
}

.glass {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .9rem;
    text-decoration: none;
    color: #0f172a;
    border-radius: .6rem;
}

.sidebar-link:hover {
    background: rgba(0, 0, 0, .06);
}

.sidebar-link.active {
    background: rgba(0, 0, 0, .06);
    box-shadow: none;
}

/* .sidebar-link.active .link-text {
            font-weight: 600;
        } */

aside {
    width: 250px;
    transition: .3s;
    margin: 10px;
    min-height: 97vh;
    position: fixed;
    overflow: auto;
}

aside.closed {
    width: 70px !important;
}

/* Submenu styles */
.has-sub .chevron {
    margin-left: auto;
    transition: transform .2s ease;
    flex-shrink: 0;
}

.has-sub[aria-expanded="true"] .chevron {
    transform: rotate(90deg);
}

.sidebar-link svg {
    flex-shrink: 0;
}

.submenu {
    margin-left: 10px;
    padding-left: 5px;
}

.submenu .sidebar-link {
    padding: .45rem .8rem;
    font-size: .95rem;
}

aside.closed .submenu {
    display: none !important;
}

/* In collapsed sidebar, hide chevrons to keep only primary icons visible */
aside.closed .has-sub .chevron {
    display: none !important;
}

/* Content layout responsiveness */
#content {
    transition: .3s;
}

@media (min-width: 769px) {
    #content {
        margin-left: 260px;
    }
}

@media (max-width: 768px) {
    aside {
        position: fixed;
        left: -260px;
        top: 10px;
        height: calc(100vh - 20px);
        z-index: 50;
        transition: .3s;
    }

    aside.show {
        left: 10px;
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 40;
    }

    #content {
        margin-left: 0 !important;
    }
}

#toggleSidebar {
    width: 30px;
    height: 30px;
    background-color: transparent;
    color: rgb(255 255 255 / 1);
}

/* Ensure mobile menu button stays above cards */
#openMobileSidebar {
    z-index: 1060;
}

/* DataTable transparent styling */
#appointmentsTable,
#appointmentsTable thead,
#appointmentsTable tbody,
#appointmentsTable th,
#appointmentsTable td {
    background-color: transparent !important;
}

#appointmentsTable thead th {
    border-bottom: 1px solid rgba(255, 255, 255, .35) !important;
    color: #0f172a;
}

#appointmentsTable tbody td,
#appointmentsTable tbody th {
    border-top: 1px solid rgba(255, 255, 255, .25) !important;
    color: #0f172a;
}

#appointmentsTable tbody tr:hover {
    background-color: rgba(255, 255, 255, .12) !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_paginate .page-link {
    background-color: transparent;
    border-color: rgba(255, 255, 255, .35);
    color: #0f172a;
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background-color: rgba(13, 110, 253, .2);
    border-color: rgba(13, 110, 253, .4);
    color: #0d6efd;
}

.dataTables_wrapper .dataTables_info {
    color: #0f172a;
}

.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 .13rem rgb(221 193 191 / 29%) !important;
    border-color: #edddd3 !important;
}