@charset "UTF-8";
/*!
 * SOS Tasker — Aurora Liquid Glass Theme Layer
 * ------------------------------------------------------------------
 * A Liquid Glass material layer (Apple, 2025) recreated with web
 * standards on top of CoreUI v5 / Bootstrap 5.
 *
 * Philosophy (developer.apple.com/documentation/technologyoverviews/liquid-glass):
 *   - Glass is DYNAMIC: it picks up color from what surrounds it
 *     (aurora + geometry scene shine through every surface).
 *   - Light behaves optically: a specular rim on the top edge, an
 *     inner glow, and a bright "lensing" boundary where the panel
 *     meets the background.
 *   - Content stays in focus: fills stay low-alpha so the scene
 *     infuses the surface; controls/inputs keep raised contrast tiers.
 *
 * Architecture (why it cannot break CoreUI/Bootstrap):
 *   1. `backdrop-filter` frost ONLY on chrome that never contains
 *      fixed-position descendants: .sidebar, .header, .dropdown-menu,
 *      .modal-content. Cards use translucent fills WITHOUT filters,
 *      so modals nested inside cards keep native fixed positioning.
 *   2. The liquid border is a masked gradient ring (::before +
 *      mask-composite), guarded by @supports; browsers without mask
 *      compositing fall back to the plain rgba hairline border.
 *   3. All colors come from tokens for light AND dark themes.
 *   4. Mobile-first; desktop floating panels activate at min-width 992px.
 *   5. Degradation: @supports (no backdrop-filter / no mask),
 *      prefers-reduced-motion, prefers-reduced-transparency, @media print.
 */

/* ==================================================================
 * 1. DESIGN TOKENS
 * ================================================================ */

:root {
    /* Frame — gap between viewport edge and floating chrome */
    --glass-frame-gap: .75rem;

    /* Radius scale */
    --glass-radius-sm: .625rem;
    --glass-radius-md: .875rem;
    --glass-radius-lg: 1.125rem;
    --glass-radius-xl: 1.5rem;
    --glass-radius-pill: 50rem;

    /* Blur strength per surface tier */
    --glass-blur-md: 14px;
    --glass-blur-lg: 22px;

    /* Fill tiers (light) — chrome is the most transparent, overlays the least */
    --glass-bg-fill: rgba(255, 255, 255, .24);
    --glass-surface: rgba(255, 255, 255, .38);
    --glass-surface-raised: rgba(255, 255, 255, .78);
    --glass-overlay: rgba(255, 255, 255, .6);

    /* Optics */
    --glass-border: rgba(13, 38, 76, .12);
    --glass-specular-top: rgba(255, 255, 255, .9);
    --glass-specular-glow: rgba(255, 255, 255, .32);
    --glass-inner-shadow: rgba(13, 38, 76, .05);
    /* Chromatic dispersion along the lensing edge: white speculars pick up
       the emerald/gold identity colors, like light refracting through glass */
    --glass-edge-sheen: linear-gradient(135deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, .22) 30%,
            rgba(13, 148, 136, .28) 50%,
            rgba(202, 162, 39, .22) 68%,
            rgba(255, 255, 255, .45) 100%);
    --glass-shadow: 0 8px 24px rgba(13, 38, 76, .08), 0 2px 6px rgba(13, 38, 76, .05);
    --glass-specular:
        inset 0 1px 1px var(--glass-specular-top),
        inset 0 0 18px var(--glass-specular-glow),
        inset 0 -1px 1px var(--glass-inner-shadow);

    /* Interactive fills */
    --glass-hover-tint: rgba(88, 86, 214, .07);
    --glass-active-tint: rgba(88, 86, 214, .14);

    /* Aurora palette (light) — emerald/teal/gold identity for a
       Pakistani security organization */
    --aurora-base: #edf4ef;
    --aurora-1: rgba(5, 118, 66, .16);
    --aurora-2: rgba(13, 148, 136, .14);
    --aurora-3: rgba(202, 162, 39, .1);
    --aurora-4: rgba(16, 185, 129, .13);

    /* Geometry scene (light) */
    --gs-line: rgba(1, 65, 28, .22);
    --gs-line-soft: rgba(5, 150, 105, .32);
    --gs-dot: rgba(1, 65, 28, .24);
    --gs-fill: rgba(5, 150, 105, .14);
    --gs-gold: rgba(202, 162, 39, .35);
}

[data-coreui-theme="dark"] {
    --glass-bg-fill: rgba(23, 28, 39, .34);
    --glass-surface: rgba(26, 31, 44, .44);
    --glass-surface-raised: rgba(40, 47, 64, .72);
    --glass-overlay: rgba(23, 28, 39, .56);

    --glass-border: rgba(255, 255, 255, .11);
    --glass-specular-top: rgba(255, 255, 255, .2);
    --glass-specular-glow: rgba(255, 255, 255, .07);
    --glass-inner-shadow: rgba(0, 0, 0, .35);
    --glass-edge-sheen: linear-gradient(135deg,
            rgba(255, 255, 255, .5) 0%,
            rgba(255, 255, 255, .08) 30%,
            rgba(45, 212, 191, .3) 50%,
            rgba(212, 175, 55, .26) 68%,
            rgba(255, 255, 255, .22) 100%);
    --glass-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .25);

    --glass-hover-tint: rgba(122, 162, 255, .09);
    --glass-active-tint: rgba(122, 162, 255, .17);

    --aurora-base: #0f1512;
    --aurora-1: rgba(16, 185, 129, .18);
    --aurora-2: rgba(13, 148, 136, .16);
    --aurora-3: rgba(202, 162, 39, .1);
    --aurora-4: rgba(1, 65, 28, .4);

    --gs-line: rgba(110, 231, 183, .24);
    --gs-line-soft: rgba(45, 212, 191, .26);
    --gs-dot: rgba(167, 243, 208, .2);
    --gs-fill: rgba(16, 185, 129, .2);
    --gs-gold: rgba(212, 175, 55, .3);
}

/* ==================================================================
 * 2. AURORA BACKGROUND + GEOMETRY SCENE (fixed decorative layers)
 *    Pure CSS/SVG-free shapes that shine through every glass surface.
 * ================================================================ */

body {
    background-color: var(--aurora-base) !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(42rem 42rem at 12% -8%, var(--aurora-1), transparent 60%),
        radial-gradient(38rem 38rem at 105% 12%, var(--aurora-2), transparent 62%),
        radial-gradient(36rem 36rem at -10% 78%, var(--aurora-4), transparent 60%),
        radial-gradient(44rem 44rem at 82% 108%, var(--aurora-3), transparent 64%);
    background-color: var(--aurora-base);
}

@media (prefers-reduced-motion: no-preference) {
    body::before {
        background-size: 170% 170%;
        animation: aurora-drift 48s ease-in-out infinite alternate;
    }

    @keyframes aurora-drift {
        from {
            background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%;
        }
        to {
            background-position: 30% 22%, 72% 26%, 26% 74%, 70% 80%;
        }
    }
}

/* Geometry widgets: rings, squircles and a dot grid floating behind
   the UI. They are visible through every translucent surface and get
   truly refracted behind backdrop-filtered chrome. */
.glass-scene {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.gs {
    position: absolute;
    display: block;
}

.gs-ring {
    aspect-ratio: 1;
    border: 2px solid var(--gs-line);
    border-radius: 50%;
}

.gs-ring--dashed {
    border-style: dashed;
}

.gs-square {
    border: 2px solid var(--gs-line-soft);
    border-radius: 22%;
    transform: rotate(14deg);
}

.gs-blob {
    filter: blur(52px);
    border-radius: 50%;
}

/* Crescent + star motif — a subtle nod to the national identity */
.gs-crescent {
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--gs-fill);
    transform: rotate(-24deg);
    -webkit-mask: radial-gradient(circle at 68% 32%, transparent 55%, #000 56%);
    mask: radial-gradient(circle at 68% 32%, transparent 55%, #000 56%);
}

.gs-star {
    aspect-ratio: 1;
    background: var(--gs-gold);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.gs-grid {
    background-image: radial-gradient(var(--gs-dot) 1.5px, transparent 2px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(closest-side, #000, transparent);
    mask-image: radial-gradient(closest-side, #000, transparent);
}

.gs-ring-1 {
    width: clamp(320px, 40vw, 640px);
    top: -14vh;
    right: 3vw;
    opacity: .85;
}

.gs-ring-2 {
    width: clamp(220px, 26vw, 430px);
    bottom: 6vh;
    left: 20vw;
    opacity: .8;
}

.gs-ring-3 {
    width: clamp(120px, 13vw, 190px);
    top: 44vh;
    left: 45vw;
    opacity: .55;
}

.gs-square-1 {
    width: clamp(150px, 17vw, 280px);
    top: 21vh;
    left: 5vw;
    opacity: .8;
}

.gs-square-2 {
    width: clamp(90px, 10vw, 150px);
    bottom: 15vh;
    right: 7vw;
    transform: rotate(-18deg);
    opacity: .75;
}

.gs-grid-1 {
    width: clamp(300px, 36vw, 540px);
    height: clamp(220px, 26vw, 380px);
    top: 11vh;
    left: 32vw;
    opacity: .65;
}

.gs-crescent-1 {
    width: clamp(170px, 19vw, 300px);
    top: 30vh;
    right: 14vw;
    opacity: .9;
}

.gs-star-1 {
    width: clamp(44px, 5vw, 76px);
    top: 33.5vh;
    right: calc(14vw + clamp(170px, 19vw, 300px) * .84);
    opacity: .95;
}

.gs-blob-1 {
    width: clamp(420px, 46vw, 720px);
    height: clamp(420px, 46vw, 720px);
    top: -140px;
    right: 12vw;
    background: var(--gs-fill);
    opacity: .85;
}

.gs-blob-2 {
    width: clamp(360px, 40vw, 620px);
    height: clamp(360px, 40vw, 620px);
    bottom: -120px;
    left: 8vw;
    background: var(--aurora-2);
    opacity: .8;
}

.gs-blob-3 {
    width: clamp(240px, 28vw, 440px);
    height: clamp(240px, 28vw, 440px);
    top: 52vh;
    left: -80px;
    background: var(--gs-gold);
    filter: blur(64px);
    opacity: .55;
}

@media (prefers-reduced-motion: no-preference) {
    .gs-ring-1 {
        animation: gs-spin 90s linear infinite;
    }

    .gs-ring-2 {
        animation: gs-float 26s ease-in-out infinite alternate;
    }

    .gs-square-1 {
        animation: gs-float 32s ease-in-out infinite alternate-reverse;
    }

    .gs-square-2 {
        animation: gs-float 22s ease-in-out infinite alternate;
    }

    .gs-grid-1 {
        animation: gs-drift 40s ease-in-out infinite alternate;
    }

    .gs-crescent-1 {
        animation: gs-float 36s ease-in-out infinite alternate-reverse;
    }

    @keyframes gs-spin {
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes gs-float {
        from {
            translate: 0 0;
        }
        to {
            translate: 18px -26px;
        }
    }

    @keyframes gs-drift {
        from {
            translate: 0 0;
        }
        to {
            translate: -24px 16px;
        }
    }
}

/* The main column must not paint its own opaque background */
.wrapper.d-flex.flex-column.min-vh-100,
.body.flex-grow-1,
/* Standalone auth pages (login) center content in a full-height tinted box */
.bg-body-tertiary.min-vh-100 {
    background: transparent !important;
}

/* ==================================================================
 * 3. LIQUID GLASS EDGE SYSTEM
 *    Specular rims (inset shadows) + lensing gradient ring
 *    (::after, masked) + true refraction layer for cards.
 *
 *    WHY the card blur lives on ::before at z-index:-1:
 *    - The pseudo carries BOTH the tint and the backdrop-filter while the
 *      .card element itself stays filter-free and NOT a stacking context,
 *      so position:fixed modals nested inside cards keep native viewport
 *      positioning (backdrop-filter on .card would trap them).
 *    - A negative z-index child paints after the page background but the
 *      card's own background is transparent, so the glass panel shows
 *      through with real refraction of the aurora + geometry scene.
 * ================================================================ */

/* NOTE: .dropdown-menu must stay position:absolute (Popper positioning),
   so it only receives the optics here — never a position override. */
.glass-edge,
.card,
.modal-content,
.page-heading-bar {
    box-shadow: var(--glass-shadow), var(--glass-specular);
}

.card,
.page-heading-bar {
    position: relative;
    background-color: transparent !important;
}

.modal-content {
    position: relative;
}

.dropdown-menu {
    box-shadow: var(--glass-shadow), var(--glass-specular);
}

/* The refractive glass panel behind cards/widgets */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .card::before,
    .page-heading-bar::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background-color: var(--glass-surface);
        -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(1.5) brightness(1.03);
        backdrop-filter: blur(var(--glass-blur-md)) saturate(1.5) brightness(1.03);
        pointer-events: none;
    }
}

/* Without backdrop-filter support the pseudo still provides the tint */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .card::before,
    .page-heading-bar::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background-color: var(--glass-surface-raised);
        pointer-events: none;
    }
}

@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    /* Liquid edge rings — unified on ::after for every surface */
    .card::after,
    .modal-content::after,
    .dropdown-menu::after,
    .page-heading-bar::after,
    .sidebar.sidebar-fixed::after,
    .header.header-sticky::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 3;
        border-radius: inherit;
        padding: 1px;
        background: var(--glass-edge-sheen);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        pointer-events: none;
    }

    /* Chrome panels get a slightly thicker, brighter liquid rim */
    .sidebar.sidebar-fixed::after,
    .header.header-sticky::after {
        padding: 1.5px;
    }
}

/* ==================================================================
 * 4. GLASS SURFACE PRIMITIVES (shared recipe)
 * ================================================================ */

.sidebar,
.header.header-sticky,
.dropdown-menu,
.modal-content {
    border: 1px solid var(--glass-border);
}

/* Chrome tier — most transparent, real refraction */
.sidebar,
.header.header-sticky {
    background-color: var(--glass-bg-fill);
    box-shadow: var(--glass-shadow), var(--glass-specular);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    /* Chrome tier — highly transmissive so the scene reads through it */
    .sidebar,
    .header.header-sticky {
        -webkit-backdrop-filter: blur(16px) saturate(1.8) brightness(1.04);
        backdrop-filter: blur(16px) saturate(1.8) brightness(1.04);
    }

    .dropdown-menu,
    .modal-content {
        -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.45);
        backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.45);
    }
}

/* No native blur support → raise opacity so contrast never suffers */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root {
        --glass-bg-fill: rgba(255, 255, 255, .94);
        --glass-surface: rgba(255, 255, 255, .96);
        --glass-overlay: rgba(255, 255, 255, .97);
    }

    [data-coreui-theme="dark"] {
        --glass-bg-fill: rgba(24, 29, 40, .96);
        --glass-surface: rgba(27, 33, 46, .97);
        --glass-overlay: rgba(23, 28, 39, .97);
    }
}

/* Users who opt out of transparency get fully solid surfaces */
@media (prefers-reduced-transparency: reduce) {
    :root {
        --glass-bg-fill: #f6f8fb;
        --glass-surface: #ffffff;
        --glass-overlay: #ffffff;
    }

    [data-coreui-theme="dark"] {
        --glass-bg-fill: #1b212e;
        --glass-surface: #232a39;
        --glass-overlay: #232a39;
    }

    .glass-scene {
        display: none;
    }
}

/* ==================================================================
 * 5. CARDS — true liquid glass panels (tint + refraction live on the
 *    ::before pseudo, see section 3), unified heading bar
 * ================================================================ */

.card {
    /* Element bg stays clear — the refractive panel is ::before.
       Solid utility variants (.card.bg-*) still win via !important. */
    --cui-card-bg: transparent;
    --cui-card-cap-bg: transparent;
    --cui-card-border-color: var(--glass-border);
    --cui-card-border-radius: var(--glass-radius-lg);
    --cui-card-inner-border-radius: calc(var(--glass-radius-lg) - 1px);
    background-image: linear-gradient(155deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 42%);
}

[data-coreui-theme="dark"] .card {
    color: var(--cui-body-color);
    background-image: linear-gradient(155deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 42%);
}

/* Uniform "page heading bar" on every card header */
.card-header {
    border-bottom: 1px solid var(--glass-border);
    font-weight: 600;
    letter-spacing: .01em;
    padding-top: .9rem;
    padding-bottom: .9rem;
}

.card-footer {
    border-top: 1px solid var(--glass-border);
    background-color: transparent;
}

/* Solid utility backgrounds become tinted glass instead of flat blocks */
.card-header.bg-primary:not(.text-white),
.card-header.bg-light,
.card-header.bg-body-tertiary {
    background-color: var(--glass-hover-tint) !important;
}

.card-header.bg-primary.text-white,
.card-header.bg-success.text-white {
    border: 0;
    border-bottom: none;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0));
    text-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

.card-group > .card + .card {
    border-left: 1px solid var(--glass-border);
}

/* ==================================================================
 * 6. PAGE HEADINGS — one consistent scale across all pages
 * ================================================================ */

.body h1.display-4,
.body h1.display-5 {
    font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -.01em;
}

.body > .container-fluid > h1,
.body > .container > h1 {
    padding-inline: .25rem;
}

/* Standardized component for new pages: <x-page-header> */
.page-heading-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius-lg);
}

.page-heading-bar .page-heading-main {
    flex: 1 1 auto;
    min-width: 0;
}

.page-heading-bar .page-heading-title {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin: 0;
    font-size: clamp(1.15rem, 1rem + .9vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -.01em;
    min-width: 0;
    position: relative;
    z-index: 2;
}

.page-heading-bar .page-heading-subtitle {
    margin: 0;
    color: var(--cui-secondary-color);
    font-size: .875rem;
    min-width: 0;
    position: relative;
    z-index: 2;
}

.page-heading-bar .page-heading-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-inline-start: auto;
    position: relative;
    z-index: 2;
}

@media (max-width: 575.98px) {
    .page-heading-bar .page-heading-actions {
        width: 100%;
        margin-inline-start: 0;
    }
}

/* Centered variant (<x-page-header centered>) — classic two-row heading
 * (title over subtitle) inside the glass panel. Icon stays INLINE before
 * the words; footprint stays compact so it flows with the page instead
 * of reading as a separate hero banner. */
.page-heading-bar.page-heading-bar-centered {
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: 1.125rem 1.5rem;
    border-radius: var(--glass-radius-lg);
    text-align: center;
}

.page-heading-bar.page-heading-bar-centered .page-heading-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.page-heading-bar.page-heading-bar-centered .page-heading-title {
    justify-content: center;
    gap: .55rem;
    font-size: clamp(1.25rem, 1.05rem + .9vw, 1.7rem);
    letter-spacing: -.01em;
}

.page-heading-bar.page-heading-bar-centered .page-heading-subtitle {
    margin-top: .125rem;
}

/* ==================================================================
 * 7. SIDEBAR — rounded floating panel (desktop), glass drawer (mobile)
 * ================================================================ */

.sidebar .sidebar-brand {
    color: var(--cui-body-color);
    position: relative;
    z-index: 2;
}

/* Nav items become rounded pills */
.sidebar .nav-link {
    border-radius: var(--glass-radius-sm);
    margin-inline: .5rem;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
    position: relative;
    z-index: 2;
}

.sidebar .nav-link:hover {
    background-color: var(--glass-hover-tint);
}

.sidebar .nav-link.active {
    background-color: var(--glass-active-tint);
    color: var(--cui-primary);
    font-weight: 600;
}

.sidebar .nav-title {
    padding-inline: 1rem;
}

.sidebar .nav-dropdown-items .nav-link {
    margin-inline: 1rem;
}

/* Desktop: detach panel from viewport edges */
@media (min-width: 992px) {
    .sidebar.sidebar-fixed:not(.sidebar-end):not(.hide) {
        top: var(--glass-frame-gap);
        bottom: var(--glass-frame-gap);
        left: var(--glass-frame-gap);
        height: auto;
        border: 1px solid var(--glass-border);
        border-radius: var(--glass-radius-xl);
        overflow: hidden;
    }

    /* Mini rail (narrow-unfoldable): CoreUI computes icon width as
       calc(4rem - paddings) assuming NO extra nav-link margins — reset
       ours so icons sit perfectly centered like stock CoreUI. Bare text
       nodes are clipped by CoreUI's own overflow rules; never add
       margins or auto-centering to .nav-icon here or labels reappear. */
    .sidebar-narrow-unfoldable:not(:hover) .nav-link,
    .sidebar-narrow .nav-link {
        margin-inline: 0;
        border-radius: var(--glass-radius-md);
    }

    /* When the rail unfolds over content, raise its fill for legibility */
    .sidebar-narrow-unfoldable:hover {
        background-color: var(--glass-overlay);
        box-shadow: 0 .5rem 1rem rgba(8, 10, 12, .15), var(--glass-specular);
    }
}

/* Mobile drawer (off-canvas handled by layout scripts): round outer edge */
@media (max-width: 991.98px) {
    .sidebar.sidebar-show {
        border-radius: 0 var(--glass-radius-xl) var(--glass-radius-xl) 0;
        overflow: hidden;
    }
}

/* ==================================================================
 * 8. HEADER — frosted sticky bar, rounded when detached (desktop)
 * ================================================================ */

.header.header-sticky {
    border: 0;
    border-bottom: 1px solid var(--glass-border);
}

.header.header-sticky > .container-fluid,
.header.header-sticky .container-fluid.border-bottom {
    border-bottom: 0;
    position: relative;
    z-index: 2;
    min-height: 4.25rem;
}

/* Scrolled state (toggled by the layout script): the bar condenses and
   lifts like a liquid glass toolbar picking up depth */
.header.header-sticky.shadow-sm {
    background-color: var(--glass-overlay);
    box-shadow: 0 12px 32px rgba(8, 10, 20, .14), var(--glass-specular);
}

@media (min-width: 992px) {
    .header.header-sticky {
        margin: var(--glass-frame-gap) var(--glass-frame-gap) 0;
        background-color: var(--glass-bg-fill);
        border: 1px solid var(--glass-border);
        border-radius: var(--glass-radius-lg);
    }
}

/* --- Modern pill navigation ------------------------------------- */
.header-toggler,
.header-nav .nav-link {
    transition: background-color .15s ease-in-out, color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.header-toggler {
    border-radius: var(--glass-radius-pill);
}

.header-toggler:hover {
    background-color: var(--glass-hover-tint);
}

.header-nav .nav-link {
    border-radius: var(--glass-radius-pill);
    font-weight: 500;
    padding-inline: .875rem;
}

.header-nav .nav-link:hover {
    background-color: var(--glass-hover-tint);
}

.header-nav .nav-link.active {
    background-color: var(--glass-active-tint);
    color: var(--cui-primary);
    font-weight: 600;
}

.header-nav .btn-warning.nav-link {
    border-radius: var(--glass-radius-pill);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5);
}

/* Keyboard accessibility across every header control */
.header-nav .nav-link:focus-visible,
.header-toggler:focus-visible {
    outline: 2px solid rgba(var(--cui-primary-rgb), .65);
    outline-offset: 2px;
}

/* Avatar halo — a small specular ring around the profile image */
.header-nav .avatar {
    border-radius: 50%;
    box-shadow:
        0 0 0 2px var(--cui-body-bg),
        0 0 0 3.5px rgba(var(--cui-primary-rgb), .45),
        0 2px 6px rgba(8, 10, 20, .25);
    transition: box-shadow .2s ease-in-out;
}

.header-nav .nav-link:hover .avatar {
    box-shadow:
        0 0 0 2px var(--cui-body-bg),
        0 0 0 3.5px rgba(var(--cui-primary-rgb), .8),
        0 3px 10px rgba(8, 10, 20, .3);
}

/* ==================================================================
 * 9. TABLES — translucent rows over the glass card
 * ================================================================ */

.table {
    --cui-table-bg: transparent;
    --cui-table-striped-bg: var(--glass-hover-tint);
    --cui-table-hover-bg: var(--glass-active-tint);
    --cui-table-active-bg: var(--glass-active-tint);
    --cui-table-border-color: var(--glass-border);
}

/* DataTables (legacy skin) controls follow the same recipe */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background-color: var(--glass-surface-raised);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius-sm);
    color: inherit;
    padding: .25rem .5rem;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: 0;
    border-color: rgba(var(--cui-primary-rgb), .55);
    box-shadow: 0 0 0 .2rem rgba(var(--cui-primary-rgb), .18);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter label {
    color: var(--cui-secondary-color);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--glass-radius-sm) !important;
    color: var(--cui-body-color) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--glass-active-tint) !important;
    color: var(--cui-primary) !important;
    border: 1px solid var(--glass-border) !important;
}

.dt-buttons .btn {
    border-radius: var(--glass-radius-pill);
}

/* ==================================================================
 * 10. FORMS — raised translucent inputs (contrast tier above cards)
 * ================================================================ */

.form-control,
.form-select {
    background-color: var(--glass-surface-raised);
    border-color: var(--glass-border);
    color: var(--cui-body-color);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--glass-surface-raised);
    border-color: rgba(var(--cui-primary-rgb), .55);
    box-shadow: 0 0 0 .2rem rgba(var(--cui-primary-rgb), .15);
    color: var(--cui-body-color);
}

.form-control::placeholder {
    color: var(--cui-secondary-color);
}

.input-group-text {
    background-color: var(--glass-hover-tint);
    border-color: var(--glass-border);
    color: var(--cui-secondary-color);
}

.form-check-input:checked {
    border-color: var(--cui-primary);
}

.form-floating > label {
    color: var(--cui-secondary-color);
}

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--glass-surface-raised);
    border-color: var(--glass-border);
    border-radius: var(--glass-radius-sm);
    color: var(--cui-body-color);
}

.select2-dropdown {
    background-color: var(--glass-surface-raised);
    border-color: var(--glass-border);
    border-radius: var(--glass-radius-sm);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--cui-primary);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--glass-active-tint);
    border-color: var(--glass-border);
    border-radius: var(--glass-radius-pill);
}

/* Quill editor */
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
    border-color: var(--glass-border);
    border-radius: var(--glass-radius-sm);
}

.ql-toolbar.ql-snow {
    background-color: var(--glass-hover-tint);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Dropzone */
.dropzone {
    background-color: var(--glass-hover-tint);
    border: 1px dashed var(--glass-border);
    border-radius: var(--glass-radius-md);
}

/* ==================================================================
 * 11. BUTTONS — subtle depth without changing semantic colors
 * ================================================================ */

.btn {
    border-radius: var(--glass-radius-sm);
}

.btn-pill,
.btn-group > .btn,
.btn-group-vertical > .btn {
    border-radius: var(--glass-radius-sm);
}

.btn-group > .btn:first-child {
    border-start-start-radius: var(--glass-radius-sm);
    border-end-start-radius: var(--glass-radius-sm);
}

.btn-group > .btn:last-child {
    border-start-end-radius: var(--glass-radius-sm);
    border-end-end-radius: var(--glass-radius-sm);
}

.btn-outline-secondary,
.btn-outline-primary,
.btn-light {
    background-color: var(--glass-surface-raised);
}

.btn-light:not(:hover):not(:focus):not(:disabled) {
    border-color: var(--glass-border);
}

/* ==================================================================
 * 12. OVERLAYS — dropdowns, modals, pagination, alerts, badges
 * ================================================================ */

.dropdown-menu {
    background-color: var(--glass-overlay);
    border-radius: var(--glass-radius-md);
    padding: .375rem;
    max-width: calc(100vw - 1.5rem);
}

.dropdown-menu .dropdown-item {
    border-radius: var(--glass-radius-sm);
    padding: .45rem .75rem;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: var(--glass-hover-tint);
}

.modal-content {
    background-color: var(--glass-overlay);
    border-radius: var(--glass-radius-lg);
}

.pagination {
    --cui-pagination-border-radius: var(--glass-radius-sm);
    --cui-pagination-border-color: var(--glass-border);
    --cui-pagination-bg: transparent;
    --cui-pagination-hover-bg: var(--glass-hover-tint);
    --cui-pagination-focus-bg: var(--glass-hover-tint);
    --cui-pagination-active-bg: var(--cui-primary);
    gap: .25rem;
}

.alert {
    border-radius: var(--glass-radius-md);
    background-color: var(--glass-surface-raised);
}

.badge {
    border-radius: var(--glass-radius-pill);
}

/* Assignee name chip on /task — theme-aware neutral surface that reads
   on both light and dark backgrounds. Uses the existing glass tokens. */
.dt-name-badge {
    background-color: var(--glass-surface-raised);
    color: var(--cui-body-color);
    border: 1px solid var(--glass-border);
    font-weight: 500;
    padding: .35em .6em;
}

[data-coreui-theme="dark"] .dt-name-badge {
    color: var(--cui-body-color);
}

.list-group-item {
    background-color: transparent;
    border-color: var(--glass-border);
}

.nav-tabs {
    --cui-nav-tabs-border-color: var(--glass-border);
}

.nav-tabs .nav-link {
    border-radius: var(--glass-radius-sm) var(--glass-radius-sm) 0 0;
}

.nav-pills .nav-link {
    border-radius: var(--glass-radius-pill);
}

.breadcrumb {
    --cui-breadcrumb-divider-color: var(--cui-secondary-color);
}

/* SimpleBar track blends into glass */
.simplebar-track .simplebar-thumb {
    background-color: rgba(var(--cui-emphasis-color-rgb, 13, 38, 76), .18);
    border-radius: var(--glass-radius-pill);
}

/* ==================================================================
 * 14. TASK PRESENT STATUS & JOURNALING (LIGHT & DARK THEME AWARE)
 * ================================================================ */

.present-status-journal-card {
    background-color: var(--glass-surface-raised);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius-lg);
    color: var(--cui-body-color);
}

.journal-status-box {
    background-color: var(--glass-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius-md);
    color: var(--cui-body-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-coreui-theme="dark"] .journal-status-box {
    background-color: rgba(26, 32, 44, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--cui-body-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.journal-empty-box {
    background-color: var(--glass-surface);
    border: 1px dashed var(--glass-border);
    border-radius: var(--glass-radius-md);
    color: var(--cui-secondary-color);
}

[data-coreui-theme="dark"] .journal-empty-box {
    background-color: rgba(24, 30, 42, 0.6);
    border-color: rgba(255, 255, 255, 0.12);
    color: #9da5b1;
}

.journal-form-wrapper {
    background-color: var(--glass-surface-raised);
    border-top: 1px solid var(--glass-border);
}

[data-coreui-theme="dark"] .journal-form-wrapper {
    background-color: rgba(20, 25, 36, 0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.journal-history-box {
    background-color: var(--glass-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius-sm);
    color: var(--cui-body-color);
}

[data-coreui-theme="dark"] .journal-history-box {
    background-color: rgba(26, 32, 44, 0.8);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--cui-body-color);
}

/* Tagged Support Member Badges */
.journal-tagged-badge {
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    border: 1px solid rgba(13, 110, 253, 0.25);
    font-weight: 500;
    transition: all 0.2s ease;
}

[data-coreui-theme="dark"] .journal-tagged-badge {
    background-color: rgba(13, 110, 253, 0.22);
    color: #79b5ff;
    border-color: rgba(121, 181, 255, 0.35);
}

[data-coreui-theme="dark"] .journal-tagged-badge .text-secondary {
    color: rgba(220, 230, 245, 0.75) !important;
}

/* Live User Tagging Dropdown �?" solid, theme-aware surface via the
   pre-built .bg-body utility on the element; native list-group states
   (hover = tertiary bg, selected = primary) need no overrides here. */

[data-coreui-theme="dark"] .user-search-container .input-group-text,
[data-coreui-theme="dark"] #presentStatusModal .input-group-text {
    background-color: rgba(30, 37, 52, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--cui-secondary-color) !important;
}

/* Current status box inside quick-edit modal */
[data-coreui-theme="dark"] #presentStatusCurrentDisplay {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--cui-body-color) !important;
}

/* ==================================================================
 * 15. PRINT — reports/print views stay opaque and ink-friendly
 * ================================================================ */

@media print {
    body {
        background: #fff !important;
    }

    body::before,
    .glass-scene {
        display: none !important;
    }

    .card,
    .card-header,
    .card-footer,
    .form-control,
    .form-select,
    .input-group-text {
        background-color: #fff !important;
        box-shadow: none !important;
        border-color: #dee2e6 !important;
    }
}