#sidebar:hover {
    width: 300px;
}

/* Feature cards hover effect */
.mantine-Paper-root[style*="transition"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
}

/* Smooth page transitions */
#page-content {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Better scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* ========================================
   DARK MODE — triggered by data-bs-theme
   ======================================== */

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #555;
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* AppShell main area */
[data-bs-theme="dark"] .mantine-AppShell-main {
    background-color: #1A1B1E !important;
}

/* Sidebar / Navbar */
[data-bs-theme="dark"] .mantine-AppShell-navbar {
    background-color: #25262B !important;
    border-color: #373A40 !important;
}

/* Header */
[data-bs-theme="dark"] .mantine-AppShell-header {
    background-color: #1A1B1E !important;
    border-color: #373A40 !important;
}

/* All Paper components (cards) */
[data-bs-theme="dark"] .mantine-Paper-root {
    background-color: #25262B !important;
    border-color: #373A40 !important;
}

/* Paper inside hero (glass card) — keep transparent */
[data-bs-theme="dark"] #home-wrapper > div:first-child .mantine-Paper-root .mantine-Paper-root {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Hero section itself — keep gradient, no override */
[data-bs-theme="dark"] #home-wrapper > div:first-child {
    background-color: transparent !important;
}

/* NavLink items */
[data-bs-theme="dark"] .mantine-NavLink-root {
    color: #C1C2C5 !important;
}
[data-bs-theme="dark"] .mantine-NavLink-root:hover {
    background-color: #2C2E33 !important;
}
[data-bs-theme="dark"] .mantine-NavLink-root[data-active="true"] {
    background-color: rgba(0, 168, 89, 0.15) !important;
}

/* Text colors */
[data-bs-theme="dark"] .mantine-Text-root {
    color: #C1C2C5;
}
[data-bs-theme="dark"] .mantine-Title-root {
    color: #E9ECEF;
}

/* Dimmed text stays dimmed but lighter */
[data-bs-theme="dark"] .mantine-Text-root[data-c="dimmed"] {
    color: #909296 !important;
}

/* Keep hero text white (already on gradient) */
[data-bs-theme="dark"] #home-wrapper > div:first-child .mantine-Text-root,
[data-bs-theme="dark"] #home-wrapper > div:first-child .mantine-Title-root {
    color: inherit;
}

/* Dividers */
[data-bs-theme="dark"] .mantine-Divider-root {
    border-color: #373A40 !important;
}

/* Accordion */
[data-bs-theme="dark"] .mantine-Accordion-item {
    background-color: #25262B !important;
    border-color: #373A40 !important;
}
[data-bs-theme="dark"] .mantine-Accordion-control:hover {
    background-color: #2C2E33 !important;
}

/* Modals */
[data-bs-theme="dark"] .mantine-Modal-content {
    background-color: #25262B !important;
}
[data-bs-theme="dark"] .mantine-Modal-header {
    background-color: #25262B !important;
}

/* Badges */
[data-bs-theme="dark"] .mantine-Badge-root[data-variant="outline"] {
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: white !important;
}

/* Buttons — subtle and outline variants */
[data-bs-theme="dark"] .mantine-Button-root[data-variant="subtle"] {
    color: #C1C2C5 !important;
}
[data-bs-theme="dark"] .mantine-Button-root[data-variant="subtle"]:hover {
    background-color: #2C2E33 !important;
}

/* Feature card titles — keep colored */
[data-bs-theme="dark"] .mantine-Paper-root .mantine-Text-root[data-fw="600"][data-size="lg"] {
    color: #E9ECEF !important;
}

/* ThemeIcon light variant */
[data-bs-theme="dark"] .mantine-ThemeIcon-root[data-variant="light"] {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Alert */
[data-bs-theme="dark"] .mantine-Alert-root {
    background-color: rgba(0, 168, 89, 0.1) !important;
    border-color: #373A40 !important;
}