:root {
    /* Main Sidebar Desktop Background */
    --sidebar: #0f2237 !important;

    /* Text color for unselected items */
    --sidebar-foreground: #9ca3af !important;

    /* Selected/Active Item Background */
    --sidebar-accent: #2c3e50 !important;

    /* Selected/Active Menu Item Text & Icon Color (Gold) */
    --sidebar-accent-foreground: #d4af37 !important;

    /* Sidebar Border (matched to background for seamless flow) */
    --sidebar-border: #0f2237 !important;

    /* Hover background for unselected items */
    --sidebar-primary: #1f3347 !important;
    --sidebar-primary-foreground: #ffffff !important;
}

.dark {
    /* Main Sidebar Desktop Background */
    --sidebar: #0f2237 !important;

    /* Text color for unselected items */
    --sidebar-foreground: #9ca3af !important;

    /* Selected/Active Item Background */
    --sidebar-accent: #2c3e50 !important;

    /* Selected/Active Menu Item Text & Icon Color (Gold) */
    --sidebar-accent-foreground: #d4af37 !important;

    /* Sidebar Border (matched to background for seamless flow) */
    --sidebar-border: #0f2237 !important;

    /* Hover background for unselected items */
    --sidebar-primary: #1f3347 !important;
    --sidebar-primary-foreground: #ffffff !important;
}

/* Sidebar Logo Background (White) */
/*
[data-sidebar="header"] {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
*/

/* Styling primary buttons in main content area (Right Side) */
[data-slot="sidebar-inset"] [data-slot="button"],
[data-slot="sidebar-inset"] .btn-primary,
[data-slot="sidebar-inset"] .bg-primary,
[data-slot="sidebar-inset"] button[type="submit"] {
    background-color: #eef2f6 !important;
    color: #215387 !important;
    border: 1px solid #d1d9e2 !important;
    border-radius: 9999px !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

[data-slot="sidebar-inset"] [data-slot="button"],
[data-slot="sidebar-inset"] .btn-primary:hover,
[data-slot="sidebar-inset"] .bg-primary:hover,
[data-slot="sidebar-inset"] button[type="submit"]:hover {
    background-color: #e2e8f0 !important;
    color: #163d66 !important;
    border-color: #cbd5e1 !important;
}

/* Dark mode adjustments for pill buttons */
.dark [data-slot="sidebar-inset"] [data-slot="button"],
.dark [data-slot="sidebar-inset"] .btn-primary,
.dark [data-slot="sidebar-inset"] .bg-primary,
.dark [data-slot="sidebar-inset"] button[type="submit"] {
    background-color: #1a2c42 !important;
    color: #60a5fa !important;
    border-color: #263b54 !important;
}

.dark [data-slot="sidebar-inset"] [data-slot="button"],
.dark [data-slot="sidebar-inset"] .btn-primary:hover,
.dark [data-slot="sidebar-inset"] .bg-primary:hover,
.dark [data-slot="sidebar-inset"] button[type="submit"]:hover {
    background-color: #213650 !important;
    color: #93c5fd !important;
    border-color: #3b506b !important;
}

/* Force mobile sidebar to use the correct navy background instead of falling back to default */
[data-mobile="true"],
[data-mobile="true"] .bg-sidebar,
.dark [data-mobile="true"],
.dark [data-mobile="true"] .bg-sidebar,
[data-sidebar="sidebar"][data-mobile="true"] {
    background-color: #0f2237 !important;
}

/* Fix for the backdrop overlay on mobile */
[data-slot="sheet-overlay"] {
    background-color: rgba(15, 34, 55, 0.4) !important;
    /* Semi-transparent navy instead of pure black */
}

/* login page */
#app {
    background-color: #0f2237 !important;
}