/* =============================================================================
   Theme Overrides
   ========================================================================== */

/* Define custom CSS variables for theme colors */
:root {
    --app-bg-theme: #4BCC99;
    --app-bg-theme-secondary: #97d4bc;
    --app-text-theme: #4BCC99;
    --app-text-title-theme: #3AAB7E;
    --app-btn-theme-bg: #4BCC99;
    --app-btn-theme-border: #4BCC99;
    --app-btn-theme-hover-bg: #3AAB7E;
    --app-btn-theme-hover-border: #3AAB7E;
    --app-sidebar-bg: #fff;
    --app-sidebar-text-color: #212529; /* Bootstrap's default dark text color */
    --app-sidebar-logo-text-color: #3AAB7E;
    --app-hr-color: rgba(0, 0, 0, 0.1); /* Default hr color */
}

/* Override Bootstrap's default danger color with our new theme color */
.bg-theme {
    background-color: var(--app-bg-theme) !important; /* A nice, accessible green */
}

.bg-theme-secondary {
    background-color: var(--app-bg-theme-secondary) !important;
}

.text-theme {
    color: var(--app-text-theme) !important;
}

.text-title-theme {
    color: var(--app-text-title-theme) !important;
}

.btn-theme {
    background-color: var(--app-btn-theme-bg);
    border-color: var(--app-btn-theme-border);
    color: #fff;
}

.btn-theme:hover {
    background-color: var(--app-btn-theme-hover-bg);
    border-color: var(--app-btn-theme-hover-border);
    color: #fff;
}

body.auth #main {
    margin-top: 100px;
}

body:not(.auth) #main {
    margin-top: 0;
    height: 100vh;
}

/* Default sidebar */
#sidebar {
    --sidebar-active-bg: #4BCC99;
    --sidebar-active-color: #fff;
    --sidebar-hover-bg: #f0f0f0;
    --sidebar-hover-color: #333; /* Default hover color for light mode */
    width: 250px;
    transition: width 0.3s ease;
    z-index: 1045; /* Ensure it's above modal-backdrop (1050) if needed, but offcanvas handles this */
    overflow-y: auto;
    background-color: var(--app-sidebar-bg) !important; /* Use variable for sidebar background */
}

#sidebar .tbtp-logo .d-flex.flex-column.lh-1 strong.logo-full {
    color: var(--app-sidebar-logo-text-color) !important;
}

#sidebar .tbtp-logo .d-flex.flex-column.lh-1 span {
    color: var(--app-sidebar-text-color) !important;
}

/* Apply sidebar text color to link-dark in sidebar */
#sidebar .nav-link.link-dark {
    color: var(--app-sidebar-text-color) !important;
}

#sidebar hr {
    border-top-color: var(--app-hr-color);
}

/* Default: full sidebar */
.logo-full,
.logo-icon {
    transition: opacity 0.3s ease;
    position: absolute;
}

.logo-full {
    opacity: 1;
}
.logo-icon {
    opacity: 0;
}
#sidebar .tbtp-logo {
    width: 240px;
}
#sidebar .label {
    display: inline;
    transition: opacity 0.2s ease;
}

/* Keep nav layout tidy */
#sidebar .nav-link {
    display: flex;
    /* align-items: center; */
    white-space: nowrap; /* Prevent text wrapping */
}

/* Sidebar link styling */
#sidebar .nav-link.active {
    background-color: var(--sidebar-active-bg) !important;
    color: var(--sidebar-active-color) !important;
}

#sidebar .nav-link:not(.active):hover {
    background-color: var(--sidebar-hover-bg);
}

/* Sidebar link hover text color */
#sidebar .nav-link:not(.active):hover span,
#sidebar .nav-link:not(.active):hover i {
    color: var(--sidebar-hover-color) !important;
}
/* Align icons */
#sidebar .nav-link i {
    width: 24px;
    text-align: center;
}

/* Manual sidebar collapse via burger button - must be outside media query! */
.sidebar-collapsed #sidebar,
.sidebar-collapsed #sidebar .tbtp-logo {
    width: 80px !important;
    transition: width 0.3s ease;
}
.sidebar-collapsed .logo-full {
    opacity: 0 !important;
}
.sidebar-collapsed .logo-icon {
    opacity: 1 !important;
}
.sidebar-collapsed #sidebar .label {
    visibility: hidden !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease;
}

/* Remove indent for dropdown items when sidebar is collapsed */
body.sidebar-collapsed #sidebar .collapse .nav.flex-column.ps-4 {
    padding-left: 0 !important;
}

/* Main content wrapper adjustments for sidebar */
#main-wrapper {
    transition: margin-left 0.3s ease-in-out;
}

/*
 * Desktop styles (screens larger than 992px)
 * The sidebar is visible and pushes the main content.
 */
@media (min-width: 992px) {
    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
    }

    body.auth:not(.sidebar-collapsed) #main-wrapper {
        margin-left: 240px;
    }
    body.auth:not(.sidebar-collapsed) #header {
        width: calc(100% - 240px);
    }
    body.auth.sidebar-collapsed #main-wrapper {
        margin-left: 80px;
    }
    body.sidebar-collapsed #header {
        width: calc(100% - 80px);
    }
}

/*
 * Mobile and Tablet styles (screens smaller than 992px)
 * The sidebar becomes an offcanvas menu, and the main content takes the full width.
 */
@media (max-width: 991.98px) {
    #main-wrapper {
        margin-left: 0;
    }
    #header {
        width: 100%;
    }
}

/* Datatables custom pagination */
.active>.page-link, .page-link.active {
    background-color: #3AAB7E;
    border-color: #3AAB7E;
    color:white !important;
}

.active>.page-link, .page-link {
    color: #3AAB7E;
}

/*
 * Theme variables for dark mode.
 * These are applied when [data-bs-theme="dark"] is set on the <html> tag.
 */
[data-bs-theme="dark"] {
    /* Custom app-wide variables for dark mode */
    --app-bg-theme: #3AAB7E; /* A slightly darker green for dark mode header */
    --app-bg-theme-secondary: #2c7a59;
    --app-text-theme: #4BCC99;
    --app-text-title-theme: #4BCC99;
    --app-btn-theme-bg: #3AAB7E;
    --app-btn-theme-border: #3AAB7E;
    --app-btn-theme-hover-bg: #4BCC99;
    --app-btn-theme-hover-border: #4BCC99;
    --app-sidebar-bg: #2c2c2c; /* Dark background for sidebar */
    --app-sidebar-text-color: #f1f1f1; /* Light text for sidebar */
    --app-sidebar-logo-text-color: #4BCC99; /* Keep logo text bright */
    --app-hr-color: rgba(255, 255, 255, 0.1); /* Dark mode hr color */

    /* Custom sidebar variables for dark mode */
    --sidebar-hover-bg: #555;
    --sidebar-hover-color: #fff;

    /* Override Bootstrap's default dark mode colors for specific elements if needed */
    /* These were previously in body.dark-mode, now moved to [data-bs-theme="dark"] */
    .bg-white { /* This targets elements with bg-white class */
        background-color: var(--app-sidebar-bg) !important;
    }
    .text-dark {
        color: var(--app-sidebar-text-color) !important;
    }
    .text-muted {
        color: #a0a0a0 !important;
    }
    /* Ensure headings like the "Welcome" message are colored correctly */
    .h1, h1 {
        color: #f1f1f1;
    }
    .card {
        background-color: #333;
        color: #f1f1f1;
        border: 1px solid #555;
    }
    .table {
        --bs-table-color: #f1f1f1;
        --bs-table-bg: #333;
        --bs-table-border-color: #555;
        --bs-table-striped-bg: #3a3a3a;
        --bs-table-striped-color: #f1f1f1;
        --bs-table-hover-bg: #4a4a4a;
        --bs-table-hover-color: #f1f1f1;
    }
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_processing,
    .dataTables_wrapper .dataTables_paginate {
        color: #f1f1f1;
    }
    .form-control,
    .form-select {
        background-color: #444;
        color: #f1f1f1;
        border-color: #666;
    }
    .form-control:focus,
    .form-select:focus {
        background-color: #555;
        color: #f1f1f1;
        border-color: #4BCC99;
        box-shadow: 0 0 0 0.25rem rgba(58, 171, 126, 0.5);
    }
    .modal-content {
        background-color: #333;
        color: #f1f1f1;
        border: 1px solid #555;
    }
    .modal-header,
    .modal-footer {
        border-color: #555;
    }
    .dropdown-menu {
        background-color: #333;
        border-color: #555;
    }
    .dropdown-item {
        color: #f1f1f1;
    }
    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: #4a4a4a;
        color: #fff;
    }
    .dropdown-divider {
        border-color: #555;
    }
    .dropdown-header {
        color: #a0a0a0;
    }
}

/* In dark mode, the default Bootstrap btn-close is hard to see on dark headers.
   This makes it visible. */
[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* =============================================================================
   Settings Page Styles
   ========================================================================== */

.settings-card {
    background-color: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

.settings-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.settings-card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
}

/* =============================================================================
   Modern Theme Toggle Switch
   ========================================================================== */
.theme-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    cursor: pointer;
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #73C0FC; /* Light mode track color (sky blue) */
    transition: .4s;
    border-radius: 34px;
}

.slider::before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: #FFD700; /* Sun color */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12Zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM11 1h2v3h-2V1Zm0 19h2v3h-2v-3ZM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93ZM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121ZM19.071 3.515l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121ZM5.636 16.95l-1.414 1.414-2.121-2.121 1.414-1.414 2.121 2.121ZM23 11v2h-3v-2h3ZM4 11v2H1v-2h3Z'/%3E%3C/svg%3E");
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: center;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
}

input:checked + .slider {
    background-color: #48426D; /* Dark mode track color (dark blue/purple) */
}

input:checked + .slider::before {
    transform: translateX(26px);
    background-color: #F5F3CE; /* Moon color */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2348426D'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2ZM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Z'/%3E%3Cpath d='M12.5 5.09c-3.1.83-5.4 3.6-5.4 6.91 0 3.97 3.23 7.2 7.2 7.2.34 0 .68-.03 1.01-.08-.9-.98-1.51-2.25-1.51-3.64 0-2.89 2.35-5.24 5.24-5.24.92 0 1.78.24 2.53.65-1.12-4.05-4.8-7-9.07-6.82Z'/%3E%3C/svg%3E");
}