/*
 * Aurora skin for the Backpack Tabler theme.
 *
 * Frosted-glass cards over a soft mesh gradient, with the Backpack purple.
 * This is the look Backpack ships with; this file bundles glass.css and
 * fuzzy-background.css so it can be enabled with a single line.
 * Load it after backpack-color-palette.css.
 */

/* 1. Glass -------------------------------------------------------------- */
/* SLIMBAR - reduced-width navbar when horizontal layout is active */
body[bp-layout=horizontal] .single-top-bar #navbar-menu .navbar {
    border-radius: 0.5rem;
    margin-top: 1rem;
    margin-right: 1rem;
    margin-left: 1rem;
}

/* :root, */
[data-bs-theme=light],
[data-menu-theme=light] {
    /* Base surface variables */
    --tblr-bg-surface: rgba(255, 255, 255, 0.7);
    --tblr-bg-surface-tertiary: rgba(255, 255, 255, 0.7);

    /* Glass effect properties */
    --tblr-bg-surface-border: 1px solid rgba(255, 255, 255, 0.3);
    --tblr-bg-surface-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    --tblr-bg-surface-backdrop: blur(5px);
    --tblr-bg-surface-backdrop-webkit: blur(5px);

    /* Table styles */
    --tblr-table-striped-bg: rgba(255, 255, 255, 0.7)!important;
    --tblr-table-bg-typed: rgba(255, 255, 255, 0.7)!important;
}

[data-bs-theme=light] .dropdown-menu {
    --tblr-dropdown-bg: rgba(255, 255, 255, 1)!important;
}

[data-bs-theme=light] .modal-content {
    --tblr-modal-bg: rgba(255, 255, 255, 0.97) !important;
    --tblr-footer-bg: transparent;
}

[data-bs-theme=light] .card {
    --tblr-card-cap-bg: transparent;
}

[data-bs-theme=light] .table-striped>tbody>tr:nth-of-type(2n)>* {
    --tblr-table-bg-type: rgba(255, 255, 255, 0.2) !important;
}

[data-bs-theme=light] table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>* {
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.03) !important;
}

.navbar {
    --tblr-navbar-active-bg: rgba(var(--tblr-primary-rgb), 0.3);
}

/* 2. Mesh background ---------------------------------------------------- */

body {
    /* BlurBerry background */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 800 800'%3E%3Cdefs%3E%3Cfilter id='bbblurry-filter' x='-100%25' y='-100%25' width='400%25' height='400%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='40' x='0%25' y='0%25' width='100%25' height='100%25' in='SourceGraphic' edgeMode='none' result='blur'%3E%3C/feGaussianBlur%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23bbblurry-filter)'%3E%3Cellipse rx='150' ry='150' cx='462.9146816404486' cy='534.6882471935419' fill='hsl(37, 99%25, 67%25)'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='179.02369011526488' cy='367.0291623615862' fill='hsl(316, 73%25, 52%25)'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='245.39283048169654' cy='478.9292209148051' fill='hsl(185, 100%25, 57%25)'%3E%3C/ellipse%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    min-height: 100%;
}

/* on mobile */
@media (max-width: 991px) {
    body {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 400 800'%3E%3Cdefs%3E%3Cfilter id='bbblurry-filter' x='-50%25' y='-50%25' width='240%25' height='400%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='40' x='0%25' y='0%25' width='100%25' height='100%25' in='SourceGraphic' edgeMode='none' result='blur'%3E%3C/feGaussianBlur%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23bbblurry-filter)'%3E%3Cellipse rx='150' ry='150' cx='262.9146816404486' cy='334.6882471935419' fill='hsl(37, 99%25, 67%25)'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='79.02369011526488' cy='167.0291623615862' fill='hsl(316, 73%25, 52%25)'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='245.39283048169654' cy='478.9292209148051' fill='hsl(185, 100%25, 57%25)'%3E%3C/ellipse%3E%3C/g%3E%3C/svg%3E");
        background-position: top left;
    }
}

html[data-bs-theme=light] {
    /* background: #f9f9f9; */
    background: var(--tblr-gray-100);
}

[data-bs-theme=light] .page {
    background: rgb(255 255 255 / 0.00);
}

[data-bs-theme=dark] .page {
    background: rgba(0, 0, 0, 0.75);
}