:root {
    --color-bg-dark: #121212;
    --color-bg-light: #f8f9fa;
    --color-border-dark: #2c2f33;
    --color-border-light: #dee2e6;
    --color-primary: #067783;
    --color-secondary: #6c757d;
    --color-sidebar-bg-dark: #1c1c1c;
    --color-sidebar-bg-light: #ffffff;
    --color-text-dark: #e1e1e1;
    --color-text-light: #212529;
    --radius-default: 0.5rem;
    --spacing-md: 1rem;
    --spacing-sm: 0.5rem;
}

.sidebar-container {
    display: inline-block;
    position: relative;
}

.sidebar {
    background-color: var(--color-sidebar-bg-light);
    color: #495057;
    height: 100vh;
    overflow-y: auto;
    padding-top: var(--spacing-md);
    width: auto;
}

    .sidebar.collapsed {
        display: none;
    }

    .sidebar .nav-link,
    .sidebar .btn-toggle {
        align-items: center;
        display: flex;
        margin: var(--spacing-sm) 0;
        padding: var(--spacing-sm) var(--spacing-md);
        border-radius: var(--radius-default);
        color: var(--color-primary);
        white-space: nowrap;
    }

    .sidebar.collapsed .nav-link,
    .sidebar.collapsed .btn-toggle {
        justify-content: center;
        padding: var(--spacing-sm);
    }

    .sidebar .nav-link:hover,
    .sidebar .nav-link.active,
    .sidebar .btn-toggle:hover,
    .sidebar .btn-toggle.active {
        background-color: rgba(6, 119, 131, 0.1);
        color: var(--color-primary);
    }

.sidebar-toggle {
    color: var(--color-primary);
    border: 1px solid;
    cursor: pointer;
    font-size: 0.6rem;
    height: 20px;
    position: absolute;
    right: 0;
    top: 2.66%;
    transform: translateX(100%);
    width: 20px;
    z-index: 1000;
}

.sidebar-collapsed .sidebar {
    display: none;
}


.offcanvas .sidebar-collapsed .sidebar,
.offcanvas .sidebar {
    display: inline-block !important;
}
.offcanvas .sidebar-toggle {
    display: none !important;
}

.navbar .btn-link,
.navbar .dropdown-toggle,
.navbar .nav-link {
    align-items: center;
    display: flex;
    margin: var(--spacing-sm) 0;
    color: var(--color-primary);
}
    .navbar .btn-link:active,
    .navbar .dropdown-toggle:active,
    .navbar .nav-link:active {
        color: var(--color-primary);
    }

    .dropdown-toggle::after {
        display: none;
    }

.dropdown-menu .dropdown-item {
    border-radius: var(--radius-default);
    padding: var(--spacing-sm) var(--spacing-md);
}

    .dropdown-menu .dropdown-item:hover,
    .dropdown-menu .dropdown-item.active {
        background-color: rgba(6, 119, 131, 0.1);
        color: var(--color-primary);
    }

a {
    color: var(--color-primary);
    text-decoration: none;
}

    a:hover,
    a:focus {
        color: rgb(6, 119, 131);
    }

.btn-outline-primary {
    border-radius: var(--radius-default);
    padding: var(--spacing-sm) var(--spacing-md);
}

.btn-outline-primary {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus,
    .btn-outline-primary:active,
    .btn-outline-primary:active:focus {
        background-color: var(--color-primary);
        border: 1px solid var(--color-primary);
        color: #ffffff;
    }
.iconuser {
    color: var(--color-primary);
}
.pagetitle {
    color: var(--color-primary);
}

.dashboard-iframe {
    border: none;
    width: 100%;
    height: 100vh;
}

.dashboard-iframe-mobile {
    border: none;
    width: 100%;
    height: 100vh;
}

html[data-bs-theme="light"] {
    --bg-color: var(--color-bg-light);
    --text-color: var(--color-text-light);
    --border-color: var(--color-border-light);
}

    html[data-bs-theme="light"] body {
        background-color: var(--bg-color);
        color: var(--text-color);
    }

    html[data-bs-theme="light"] .sidebar,
    html[data-bs-theme="light"] .offcanvas .sidebar {
        background-color: var(--color-sidebar-bg-light);
        color: var(--color-primary);
    }

    html[data-bs-theme="light"] .sidebar-toggle {
        background-color: var(--color-sidebar-bg-light);
        border: 1px solid var(--color-border-light);
    }

    html[data-bs-theme="light"] .card,
    html[data-bs-theme="light"] .modal-content,
    html[data-bs-theme="light"] .dropdown-menu,
    html[data-bs-theme="light"] .table,
    html[data-bs-theme="light"] input,
    html[data-bs-theme="light"] select,
    html[data-bs-theme="light"] textarea {
        background-color: #ffffff;
        border-color: var(--border-color);
        color: var(--text-color);
    }

    html[data-bs-theme="light"] .navbar,
    html[data-bs-theme="light"] footer,
    html[data-bs-theme="light"] .offcanvas {
        background-color: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        color: var(--color-primary);
    }

html[data-bs-theme="dark"] {
    --bg-color: var(--color-bg-dark);
    --text-color: var(--color-text-dark);
    --border-color: var(--color-border-dark);
}

    html[data-bs-theme="dark"] body {
        background-color: var(--bg-color);
        color: var(--text-color);
    }

    html[data-bs-theme="dark"] .sidebar,
    html[data-bs-theme="dark"] .offcanvas .sidebar {
        background-color: var(--color-sidebar-bg-dark);
        color: var(--color-primary);
    }

    html[data-bs-theme="dark"] .sidebar-toggle {
        background-color: var(--color-sidebar-bg-dark);
        border: 1px solid var(--color-border-dark);
    }

    html[data-bs-theme="dark"] .card,
    html[data-bs-theme="dark"] .modal-content,
    html[data-bs-theme="dark"] .dropdown-menu,
    html[data-bs-theme="dark"] .table,
    html[data-bs-theme="dark"] input,
    html[data-bs-theme="dark"] select,
    html[data-bs-theme="dark"] textarea {
        background-color: #1c1c1c;
        border-color: var(--border-color);
        color: var(--text-color);
    }

    html[data-bs-theme="dark"] .navbar,
    html[data-bs-theme="dark"] footer,
    html[data-bs-theme="dark"] .offcanvas {
        background-color: #1c1c1c;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
        color: var(--color-primary);
    }