/* ── Sidebar: gradient-4 style in dark mode only (dark charcoal → primary blue) ── */
[data-bs-theme=dark][data-sidebar=gradient] .navbar-menu {
    background: linear-gradient(to right, #2d3755, #1a1d21) !important;
    border-right-color: #2d3755 !important;
}

/* ── Compact-mode hover popups use --vz-vertical-menu-bg; replace Velzon's stock
   blue→green gradient with backgrounds matching the restyled sidebar ── */
:root[data-bs-theme=dark][data-sidebar=gradient] {
    --vz-vertical-menu-bg: #1a1d21;
}

:root[data-sidebar=gradient]:not([data-bs-theme=dark]) {
    --vz-vertical-menu-bg: #ffffff;
}

/* Explicit opaque backgrounds on the compact-mode flyouts themselves (and the
   widened hovered menu-link strip), so they never render transparent */
html[data-bs-theme=dark][data-sidebar=gradient][data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover > .menu-dropdown,
html[data-bs-theme=dark][data-sidebar=gradient][data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover > a.menu-link,
html[data-bs-theme=dark][data-sidebar=gradient][data-sidebar-size=sm-hover] .navbar-menu .navbar-nav .menu-dropdown.show {
    background: #1a1d21 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* Dark mode: outline the flyout so it separates from same-color page content */
html[data-bs-theme=dark][data-sidebar=gradient][data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover > .menu-dropdown,
html[data-bs-theme=dark][data-sidebar=gradient][data-sidebar-size=sm-hover] .navbar-menu .navbar-nav .menu-dropdown.show {
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 0 0 4px 4px !important;
}
html[data-bs-theme=dark][data-sidebar=gradient][data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover > a.menu-link {
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-bottom: 0 !important;
    border-radius: 4px 4px 0 0 !important;
}

html[data-sidebar=gradient]:not([data-bs-theme=dark])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover > .menu-dropdown,
html[data-sidebar=gradient]:not([data-bs-theme=dark])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover > a.menu-link,
html[data-sidebar=gradient]:not([data-bs-theme=dark])[data-sidebar-size=sm-hover] .navbar-menu .navbar-nav .menu-dropdown.show {
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(15, 34, 58, 0.22), 0 2px 6px rgba(15, 34, 58, 0.12) !important;
}

/* Light mode: white flyout needs an outline to separate it from white page content */
html[data-sidebar=gradient]:not([data-bs-theme=dark])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover > .menu-dropdown,
html[data-sidebar=gradient]:not([data-bs-theme=dark])[data-sidebar-size=sm-hover] .navbar-menu .navbar-nav .menu-dropdown.show {
    border: 1px solid rgba(15, 34, 58, 0.15) !important;
    border-radius: 0 0 4px 4px !important;
}
html[data-sidebar=gradient]:not([data-bs-theme=dark])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover > a.menu-link {
    border: 1px solid rgba(15, 34, 58, 0.15) !important;
    border-bottom: 0 !important;
    border-radius: 4px 4px 0 0 !important;
}

/* Light mode: hovered compact menu-link arrow is hardcoded white in app.css */
html[data-sidebar=gradient]:not([data-bs-theme=dark])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover > a.menu-link:after {
    color: rgba(0, 0, 0, 0.85) !important;
}

/* ── Sidebar: light mode uses the soundline.io hero gradient (mint → pale green → light blue) ── */
html[data-sidebar=gradient]:not([data-bs-theme=dark]) .navbar-menu {
    background: linear-gradient(to left, #ddebf6 0%, #e0edf7 8%, #e4f0f8 17%, #e9f3fa 27%, #eef6fb 38%, #f4f9fd 50%, #f9fcfe 62%, #ffffff 75%, #ffffff 100%) !important;
    border-right-color: #ffffff !important;
}

/* Light mode: dark text/icons so they stay readable on the light gradient */
html[data-sidebar=gradient]:not([data-bs-theme=dark]) .navbar-menu .navbar-nav .nav-link,
html[data-sidebar=gradient]:not([data-bs-theme=dark]) .navbar-menu .navbar-nav .nav-link i,
html[data-sidebar=gradient]:not([data-bs-theme=dark]) .navbar-menu .menu-title {
    color: rgba(0, 0, 0, 0.85) !important;
}

html[data-sidebar=gradient]:not([data-bs-theme=dark]) .navbar-menu .navbar-nav .nav-link:hover {
    color: #000 !important;
    background-color: rgba(44, 62, 122, 0.08) !important;
    box-shadow: 0 0 10px rgba(44, 62, 122, 0.10);
}

/* Light mode: submenu dash marker — soft gray at rest, black on hover/active (mirrors dark mode's gray-to-white glow) */
html[data-sidebar=gradient]:not([data-bs-theme=dark]) .navbar-menu .navbar-nav .nav-sm .nav-link:before {
    background-color: rgba(0, 0, 0, 0.35) !important;
}

html[data-sidebar=gradient]:not([data-bs-theme=dark]) .navbar-menu .navbar-nav .nav-sm .nav-link:hover:before,
html[data-sidebar=gradient]:not([data-bs-theme=dark]) .navbar-menu .navbar-nav .nav-sm .nav-link.active:before {
    background-color: #000 !important;
    opacity: 1;
}

/* Light mode: keep the dropdown chevron dark when expanded/rotated */
html[data-sidebar=gradient]:not([data-bs-theme=dark]) .navbar-menu .navbar-nav .nav-link[data-bs-toggle=collapse]:after,
html[data-sidebar=gradient]:not([data-bs-theme=dark]) .navbar-menu .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true]:after {
    color: rgba(0, 0, 0, 0.85) !important;
}

html[data-sidebar=gradient]:not([data-bs-theme=dark]) .navbar-menu .navbar-nav .nav-link.active,
html[data-sidebar=gradient]:not([data-bs-theme=dark]) .navbar-menu .navbar-nav .nav-link[aria-expanded=true] {
    color: #000 !important;
    background-color: rgba(44, 62, 122, 0.05) !important;
}

/* All menu text and icons: white */
[data-sidebar=gradient] .navbar-menu .navbar-nav .nav-link,
[data-sidebar=gradient] .navbar-menu .navbar-nav .nav-link i,
[data-sidebar=gradient] .navbar-menu .menu-title {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Hover: soft white glow */
[data-sidebar=gradient] .navbar-menu .navbar-nav .nav-link:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.07) !important;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Active/selected: solid white highlight pill + bright white bold text */
[data-sidebar=gradient] .navbar-menu .navbar-nav .nav-link.active,
[data-sidebar=gradient] .navbar-menu .navbar-nav .nav-link[aria-expanded=true] {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-radius: 4px;
    font-weight: 600;
}

/* ── Logo glow (dark mode only) ──────────────────────────────────────────── */
[data-bs-theme=dark][data-sidebar=gradient] .navbar-menu .navbar-brand-box .logo img {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55))
            drop-shadow(0 0 14px rgba(255, 255, 255, 0.25));
    transition: filter 0.3s ease;
}

[data-bs-theme=dark][data-sidebar=gradient] .navbar-menu .navbar-brand-box .logo:hover img {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.80))
            drop-shadow(0 0 20px rgba(255, 255, 255, 0.40));
}

/* ── AG Grid: follow Bootstrap dark mode. Grids use the light themeQuartz;
   the Theming API reads --ag-* params from ancestor elements (the
   --ag-inherited-* indirection), so setting base params on the dark-mode
   root re-themes every grid. Derived colors (menus, inputs, popups, hover)
   cascade from these via color-mix ── */
[data-bs-theme=dark] {
    --ag-background-color: #212529;
    --ag-foreground-color: #ced4da;
    --ag-header-background-color: #262a2f;
    --ag-border-color: rgba(255, 255, 255, 0.14);
    --ag-row-hover-color: rgba(255, 255, 255, 0.05);
    --ag-browser-color-scheme: dark;
}

/* ── Compact (sm) sidebar: Velzon positions it absolute so it scrolls away
   with the page; keep it pinned to the viewport like the full-size sidebar ── */
:is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm] .navbar-menu {
    position: fixed !important;
    top: 0;
    bottom: 0;
}

/* ── Legacy form views (forms-enhanced.css): replace the old blue→teal
   gradient card headers with standard Velzon card styling ── */
.form-card,
[data-bs-theme=dark] .form-card {
    background: var(--vz-card-bg);
    border: 1px solid var(--vz-border-color);
    box-shadow: var(--vz-card-box-shadow, 0 1px 2px rgba(56, 65, 74, 0.15));
}

.form-card .card-header,
[data-bs-theme=dark] .form-card .card-header {
    background: var(--vz-card-cap-bg, var(--vz-card-bg));
    color: var(--vz-heading-color, inherit);
    border-bottom: 1px solid var(--vz-border-color);
}

.form-card .card-header h2, .form-card .card-header h3, .form-card .card-header h4,
.form-card .card-header h5, .form-card .card-header h6,
[data-bs-theme=dark] .form-card .card-header h2, [data-bs-theme=dark] .form-card .card-header h3,
[data-bs-theme=dark] .form-card .card-header h4, [data-bs-theme=dark] .form-card .card-header h5,
[data-bs-theme=dark] .form-card .card-header h6 {
    color: var(--vz-heading-color, inherit);
}

/* Header buttons in legacy forms were styled for the old dark gradient header;
   restyle as neutral outline buttons that work on the flat header */
.form-card .card-header .btn-outline-light {
    color: var(--vz-body-color);
    border-color: var(--vz-border-color);
}
.form-card .card-header .btn-outline-light:hover,
.form-card .card-header .btn-outline-light:focus {
    background-color: var(--vz-light);
    color: var(--vz-heading-color);
    border-color: var(--vz-border-color);
}

/* .text-white leftovers from the old gradient headers are invisible on the flat
   light-mode header (Bootstrap's utility is !important, so it beats the h2-h6
   recolor above). Neutralize it, but keep white text on colored badges. */
.form-card .card-header .text-white {
    color: var(--vz-heading-color, inherit) !important;
}
.form-card .card-header .badge.text-white,
.form-card .card-header .badge .text-white {
    color: #fff !important;
}

/*# sourceMappingURL=custom.min.css.map */