/* Background texture: show source image with soft vignette + linear gradient; remove harsh radial spot */
:root, [data-bs-theme="dark"] {
    --cui-header-height: 56px;
}

:root {
    --cui-sidebar-width: 16rem;
    --cui-sidebar-narrow-width: 4rem;
    --qdf-accent: #5bb0ff;  /* Brighter accent for better visibility */
    --qdf-accent-alt: #75d0ff;  /* Brighter accent-alt */
}

html, body {
    min-height: 100%;
    width: 100%;
}

body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

@media (min-width:992px) {
    body.sidebar-fixed.sidebar-lg-show .wrapper {
        margin-left: var(--cui-sidebar-width);
        width: calc(100% - var(--cui-sidebar-width));
    }

    body.sidebar-fixed.sidebar-lg-show .sidebar.sidebar-narrow + .wrapper {
        margin-left: var(--cui-sidebar-narrow-width);
        width: calc(100% - var(--cui-sidebar-narrow-width));
    }
}

/* Texture image - brighter for poor monitors */
.app-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: url('/assets/img/BG-DARK.png') center/cover no-repeat;
    filter: brightness(1.15) saturate(125%) blur(30px);  /* Increased brightness */
}
    /* Lighter vignette overlay */
    .app-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,rgba(15,20,40,.45) 0%,rgba(18,25,42,.40) 40%,rgba(18,25,42,.38) 65%,rgba(15,20,40,.48) 100%), radial-gradient(circle at center,rgba(0,0,0,.00) 0%,rgba(0,0,0,.01) 45%,rgba(0,0,0,.08) 80%,rgba(0,0,0,.20) 100%);
        mix-blend-mode: normal;
        pointer-events: none;
    }
    /* Subtle grain on top */
    .app-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 12px,rgba(0,0,0,.03) 12px 24px);
        opacity: .15;
        mix-blend-mode: overlay;
        pointer-events: none;
    }

/* Optional stronger texture when data attribute set to debug */
body[data-page-texture='image'][data-texture-mode='vivid'] .app-bg {
    filter: brightness(1.25) saturate(140%) blur(2px);
}

    body[data-page-texture='image'][data-texture-mode='vivid'] .app-bg::before {
        background: linear-gradient(180deg,rgba(15,20,40,.35) 0%,rgba(18,25,42,.32) 40%,rgba(18,25,42,.30) 65%,rgba(15,20,40,.42) 100%), radial-gradient(circle at center,rgba(0,0,0,.00) 0%,rgba(0,0,0,.01) 50%,rgba(0,0,0,.06) 82%,rgba(0,0,0,.18) 100%);
    }

@media (max-width:991.98px) {
    .app-bg {
        filter: brightness(1.12) saturate(120%) blur(4px);
    }
}

/* Lighter base background */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background: linear-gradient(180deg,#0d1428,#121a32);  /* Lighter navy background */
    pointer-events: none;
}

.header {
    min-height: var(--cui-header-height);
    background: linear-gradient(135deg,rgba(18,25,50,.75) 0%,rgba(18,25,50,.62) 55%,rgba(91,176,255,.22) 100%);  /* More opaque, brighter */
    backdrop-filter: blur(12px) saturate(140%);
    border-bottom: 1px solid rgba(255,255,255,.12);  /* Stronger border */
}

    .header .container-fluid {
        min-height: var(--cui-header-height);
        display: flex;
        align-items: center;
    }

    .header .header-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        background: transparent;
        border: 0;
        color: var(--bs-body-color);
        border-radius: .5rem;
    }

        .header .header-toggler:hover {
            background: rgba(255,255,255,.12);  /* Brighter hover */
        }

        .header .header-toggler:focus-visible {
            outline: 2px solid var(--qdf-accent);
            outline-offset: 2px;
        }

.app-brand-text {
    letter-spacing: .5px;
    background: linear-gradient(90deg,var(--qdf-accent),var(--qdf-accent-alt));
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 600;
}

/* More opaque cards with stronger borders */
.card {
    border: 1px solid rgba(255,255,255,.10);  /* Stronger border */
    background: linear-gradient(155deg,rgba(255,255,255,.08),rgba(255,255,255,.04));  /* Brighter background */
    backdrop-filter: blur(9px) saturate(135%);
    transition: border-color .25s ease,box-shadow .25s ease;
    overflow: hidden; /* Prevent child elements from clipping outside rounded corners */
    border-radius: 1rem; /* Ensure consistent border-radius */
}

    .card:hover {
        border-color: rgba(91,176,255,.5);  /* Brighter hover border */
        box-shadow: 0 8px 26px -10px rgba(0,0,0,.6),0 0 0 1px rgba(91,176,255,.35);
    }

.card-header {
    background: linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
    border-bottom: 1px solid rgba(255,255,255,.10);
}

/* More visible sidebar */
.sidebar.sidebar-dark {
    background: linear-gradient(180deg,rgba(18,25,50,.88),rgba(18,25,50,.75));  /* More opaque */
    box-shadow: 0 0 0 1px rgba(255,255,255,.08),0 16px 36px -12px rgba(0,0,0,.65);
}

    .sidebar.sidebar-dark .sidebar-nav .nav-link, .sidebar.sidebar-dark .sidebar-nav .nav-group-toggle {
        padding: .55rem .75rem;
        font-size: .85rem;
    }

        .sidebar.sidebar-dark .sidebar-nav .nav-link:hover, .sidebar.sidebar-dark .sidebar-nav .nav-group-toggle:hover {
            background: linear-gradient(90deg,rgba(255,255,255,.12),rgba(91,176,255,.22));  /* Brighter hover */
            color: #fff;
        }

        .sidebar.sidebar-dark .sidebar-nav .nav-link.active, .sidebar.sidebar-dark .nav-group.show > .nav-group-toggle {
            background: linear-gradient(90deg,rgba(91,176,255,.30),rgba(255,255,255,.15));  /* Brighter active */
            box-shadow: 0 0 0 1px rgba(91,176,255,.45),0 0 10px -2px rgba(91,176,255,.55);
        }

.sidebar .nav-group-items .nav-link .nav-icon-bullet {
    background-color: rgba(91,176,255,.65);  /* Brighter bullet */
}

.kpi-icon {
    background: linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.05));  /* Brighter */
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 4px 14px -4px rgba(0,0,0,.55);
}

.link-light {
    position: relative;
}

    .link-light:hover {
        text-decoration: none;
    }

    .link-light::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -3px;
        height: 2px;
        width: 0;
        background: linear-gradient(90deg,var(--qdf-accent),var(--qdf-accent-alt));
        transition: width .22s ease;
        border-radius: 3px;
    }

    .link-light:hover::after {
        width: 100%;
    }

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(255,255,255,.06);  /* More visible track */
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,rgba(91,176,255,.65),rgba(91,176,255,.48));  /* Brighter scrollbar */
    border-radius: 8px;
    border: 2px solid rgba(0,0,0,.4);
}

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg,rgba(117,208,255,.8),rgba(91,176,255,.6));
    }

.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#main-content {
    flex: 1 0 auto;
    display: flex;
}

    #main-content > .container-fluid {
        flex: 1 0 auto;
        width: 100%;
        overflow-x: hidden;
    }

@media (max-width:991.98px) {
    .wrapper {
        width: 100% !important;
        margin-left: 0 !important;
    }

    #main-content {
        overflow-x: hidden !important;
    }

    .container-fluid {
        padding-inline: 1rem;
    }
}

@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition: none !important;
    }
}

/* qdf-* design-system primitives have moved to ClientStyles/components/_design-system.scss
   (compiled to app.css). Page-specific styles live in pages/_*.scss partials. */