/* =====================================================================
   SHEQ365 - GLOBAL STYLESHEET
   ---------------------------------------------------------------------
   NEAT & WHITE theme (v7). Single stylesheet, single pass.

   HOW TO READ THIS FILE
   ---------------------
   Rules are grouped by concern (tokens, layout, typography, forms,
   sidebar, tables, responsive, third-party overrides). Where a block
   appears more than once, later rules intentionally override earlier
   ones. Some overrides are subtle (e.g. the sidebar-backdrop mask, the
   forced-orange nav hover at the very bottom). Do not reorder blocks
   without checking the ones they were written to beat.

   ORDERING RULES THAT ARE LOAD-BEARING
   ------------------------------------
   - The LAST block in this file ("Force orange hover on sidebar nav
     links") must remain last. It uses !important to defeat an
     externally-injected black hover.
   - The "SIDEBAR - OVERRIDE FOR BACKDROP AND BLUR" block must come
     after the earlier ".sidenav-backdrop" block - the second replaces
     the first.
   - The final "#sidenav { border-right: none; overflow: visible; }"
     must come after the earlier "#sidenav { border-right: 1px solid;
     overflow-y: hidden; }".
   - The final ".sidebar-footer" block must come after the commented
     footer block and the "fineprint + copyright" rule.
   - Any block scoped under #main-topbar (auth link, avatar) is
     intentionally placed after the global "a { color }" rule so it
     wins.

   MOBILE BREAKPOINTS USED
   -----------------------
     ≤ 900px  → sidebar collapses; pin button hidden in topbar
     ≤ 768px  → mobile dropdown spacing; thin scrollbars
     ≤ 767.98px → tables become stacked cards; row bracket moves
                  outside the first cell; drag-scroll disabled
   ===================================================================== */


/* =====================================================================
   1) DESIGN TOKENS
   ---------------------------------------------------------------------
   CSS custom properties used throughout the sheet. Change values here,
   not at the point of use.
   ===================================================================== */
:root {
    /* Surfaces */
    --bg-page: #ffffff;
    --bg-surface: #ffffff;
    --bg-subtle: #fafafa;
    --bg-muted: #f5f6f8;
    --bg-hover: #f3f4f6;
    --bg-hover-warm: #fff7ed;
    /* Borders */
    --border: #e5e7eb;
    --border-strong: #d1d5db;
    /* Text */
    --text: #111827;
    --text-muted: #6b7280;
    --text-subtle: #9ca3af;
    /* Accent (blue = "you are here" / primary) */
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-soft: #eff6ff;
    /* Status */
    --danger: #dc2626;
    --danger-soft: #fef2f2;
    --success: #16a34a;
    /* Brand orange (hover / warm states) */
    --orange: #f48220;
    --orange-soft: #fff7ed;
    /* Impersonation banner */
    --purple: #6f42c1;
    /* Shape */
    --radius: 8px;
    --radius-sm: 6px;
    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.10);
    /* Layout metrics (mirrored in JS/Blazor for sidebar toggle) */
    --sidenav-w: 260px;
    --topbar-h: 50px;
    --bracket-w: 3px;
}


/* =====================================================================
   2) LAYOUT FOUNDATION
   ---------------------------------------------------------------------
   Page shell: #layout is the flex row containing #sidenav and #main.
   #main is the scrolling column that hosts the topbar + content.
   ===================================================================== */

/* Global box model reset + no horizontal scroll on the page shell. */
html, body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Outer flex row. */
#layout {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* Main column. Flexes to fill the space beside the sidebar.
   margin-left transitions when the sidebar is pinned (see media query
   below) so the content shifts smoothly. */
#main {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--bg-page);
    transition: margin-left .28s ease;
    position: relative;
}

    /* Content containers always fill available width (prevents table
   overflow from forcing a horizontal scroll on the whole page). */
    #main > .content,
    #main > section.content,
    section.content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    /* Neutralise inline width/overflow wrappers around grids. */
    #main .content > div[style*="overflow-x"],
    #main .content > div[style*="width:100%"],
    #main .content > div:has(> table.quickgrid),
    #main .content > div:has(> table.my-rounded-grid) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

/* Pinned sidebar pushes the main column to the right on desktop only.
   On narrow viewports the sidebar overlays instead of pushing. */
@media (min-width: 901px) {
    #sidenav.expanded.pinned ~ #main {
        margin-left: var(--sidenav-w);
    }
}


/* =====================================================================
   3) TYPOGRAPHY
   ---------------------------------------------------------------------
   DM Sans is the app font (loaded from Google Fonts in App.razor).
   Base font-size is 1.1rem - larger than default for readability.
   ===================================================================== */
html, body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 1.1rem !important;
    line-height: 1.45;
    color: var(--text);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Links. */
a, .btn-link {
    color: var(--accent);
    text-decoration: none;
}

    a:hover, .btn-link:hover {
        color: var(--accent-hover);
        text-decoration: underline;
    }

/* Content top padding - accounts for the fixed topbar. */
.content {
    padding-top: 1.1rem;
}

/* Headings. Sized progressively; H6 is muted for sub-labels. */
h1:focus {
    outline: none;
}

h1 {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0 0 .35rem;
}

h2 {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 .3rem;
}

h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 .25rem;
}

h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 .2rem;
}

h5 {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 .15rem;
}

h6 {
    font-size: 0.8125rem;
    font-weight: 600;
    margin: 0 0 .1rem;
    color: var(--text-muted);
}

/* Page header patterns used across pages. */
.page-title,
.content > h1:first-child {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.25rem;
}

.page-subtitle,
.content > .subtitle {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.eyebrow,
.category-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.15rem;
}


/* =====================================================================
   4) FORMS / BUTTONS / BADGES / MODALS / DROPDOWNS
   ===================================================================== */

/* --- Form controls --------------------------------------------------- */
.form-control,
.form-select,
input.form-control,
select.form-select,
textarea.form-control {
    font-size: 0.875rem;
    color: var(--text);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.7rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .form-control::placeholder {
        color: var(--text-subtle);
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        outline: none;
    }

.form-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    border-color: var(--accent);
}

.darker-border-checkbox.form-check-input {
    border-color: #9ca3af;
}

/* --- Buttons --------------------------------------------------------- */
.btn {
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.85rem;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-primary {
    color: #fff;
    background-color: var(--accent);
    border: 1px solid var(--accent);
}

    .btn-primary:hover, .btn-primary:focus {
        background-color: var(--accent-hover);
        border-color: var(--accent-hover);
    }

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Extra-small button used for inline table actions. */
.btn-xs {
    padding: .2rem .45rem;
    font-size: .75rem;
    line-height: 1;
    border-radius: 4px;
}

/* Brand orange button (used for "add"-style CTAs). */
.btn-orange {
    background-color: var(--orange) !important;
    border-color: var(--orange) !important;
    color: #fff !important;
}

    .btn-orange:hover, .btn-orange:focus {
        background-color: #e06f10 !important;
        border-color: #e06f10 !important;
        color: #fff !important;
    }

/* --- Badges ---------------------------------------------------------- */
.badge {
    font-weight: 500;
    font-size: 0.75rem;
    padding: 0.28em 0.6em;
    border-radius: 999px;
    letter-spacing: 0.01em;
}

    .badge.bg-orange,
    span.badge.bg-orange,
    .bg-orange.badge {
        background-color: var(--orange) !important;
        color: #fff !important;
        border: none !important;
        --bs-bg-opacity: 1 !important;
    }

/* Due-state pills. */
.due-today {
    background-color: #fff7ed !important;
    color: #9a3412 !important;
    border: 1px solid #fed7aa !important;
}

.past-due {
    background-color: var(--danger-soft) !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
}

/* --- Validation / error boundary ------------------------------------ */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success);
}

.invalid {
    outline: 1px solid var(--danger);
}

.validation-message {
    color: var(--danger);
    font-size: 0.8125rem;
}

.blazor-error-boundary {
    background: var(--danger-soft);
    border: 1px solid #fecaca;
    color: var(--danger);
    padding: 1rem;
    border-radius: var(--radius);
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

/* --- Modals ---------------------------------------------------------- */
.modal-dialog-centered {
    max-width: 400px;
}

.modal-content {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

    .modal-content img {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background-color: #fff;
        box-shadow: var(--shadow-md);
    }

/* --- Filter / state toggle buttons ---------------------------------- */
.not-yet-due-btn {
    border-color: var(--border-strong);
    color: var(--text-muted);
    background: var(--bg-surface);
}

.btn-check:checked + .not-yet-due-btn {
    background-color: #4b5563;
    color: #fff;
    border-color: #4b5563;
}

.all-btn {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--bg-surface);
    margin-left: 1px !important;
}

.btn-check:checked + .all-btn {
    background-color: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.all-btn:hover {
    background-color: var(--accent-hover);
    color: #fff;
}

/* --- Dropdowns -------------------------------------------------------
   Positioned fixed so they escape overflow-hidden table wrappers.
   Bootstrap's auto-placement still works with position:fixed. */
.dropdown-menu {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 0.25rem;
    min-width: 150px !important;
    font-size: 0.875rem;
    position: fixed !important;
    z-index: 9999;
}

.dropdown-item {
    font-size: 0.875rem;
    line-height: 1.4;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    color: var(--text);
    display: block;
    text-align: left;
}

    .dropdown-item::before,
    .dropdown-item::after {
        content: none !important;
    }

    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: var(--accent-soft) !important;
        color: var(--accent-hover) !important;
    }

.dropdown-divider {
    display: none !important;
}

/* Three-dot "action" toggle used in table rows. */
.action-toggle {
    background: transparent !important;
    border: none !important;
    color: var(--text-muted) !important;
    font-size: 1rem !important;
    padding: 0.25rem 0.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .action-toggle::after {
        margin-left: 0 !important;
        vertical-align: middle !important;
        border-top: 0.4em solid currentColor !important;
        border-right: 0.4em solid transparent !important;
        border-left: 0.4em solid transparent !important;
        border-bottom: 0 !important;
    }

    .action-toggle:hover,
    .action-toggle:focus {
        color: var(--text) !important;
        box-shadow: none !important;
        outline: none !important;
    }


/* =====================================================================
   5) SIDEBAR + TOPBAR
   ===================================================================== */

/* --- Sidebar shell --------------------------------------------------
   Fixed full-height column. Hidden by default (translateX(-100%)) and
   revealed by .expanded. The .pinned class keeps it revealed on
   desktop and pushes #main to the right (see media query in §2). */
#sidenav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidenav-w);
    overflow-x: hidden;
    overflow-y: hidden; /* scroll is delegated to .nav-scrollable */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--bg-surface);
    color: var(--text);
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform .28s ease;
}

    #sidenav::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

/* Hide scrollbar for IE/legacy Edge. */
#sidenav {
    -ms-overflow-style: none;
}

/* Inner scrollable nav region. */
.nav-scrollable {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* Hide the scrollbar - the menu is still scrollable, just without
       a visible track. */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* old Edge / IE */
}

    .nav-scrollable::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

/* Two visible states:
   - .expanded:not(.pinned) → overlay; strong shadow to lift off page.
   - .expanded.pinned       → desktop push mode; no shadow. */
#sidenav.expanded:not(.pinned) {
    transform: translateX(0);
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.18);
}

#sidenav.expanded.pinned {
    transform: translateX(0);
    box-shadow: none;
}

/* --- Backdrop (first definition) -------------------------------------
   NOTE: A second, later definition further down replaces this one with
   a masked/blurred version. Both are kept in document order. */
#layout .sidenav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(1px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

    #layout .sidenav-backdrop.show {
        opacity: 1;
        pointer-events: auto;
    }

/* --- Topbar ---------------------------------------------------------
   Fixed across the top of #main. Shifts right by --sidenav-w when the
   sidebar is pinned on desktop (see media query below). */
#main-topbar {
    position: fixed;
    top: 0;
    left: 0;
    height: var(--topbar-h);
    width: 100%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    z-index: 900;
    transition: left .28s ease, width .28s ease, background-color .28s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    pointer-events: auto;
}

@media (min-width: 901px) {
    #sidenav.expanded.pinned ~ #main #main-topbar {
        left: var(--sidenav-w);
        width: calc(100% - var(--sidenav-w));
    }
}

/* Impersonation mode paints the topbar purple. */
body.impersonating #main-topbar {
    background: var(--purple);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.topbar-controls {
    display: flex;
    align-items: center;
    gap: 2px;
}

.topbar-impersonation {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    color: inherit;
}

.btn-impersonate {
    background-color: #fff !important;
    color: var(--purple) !important;
    border: none !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
    transition: all .2s ease;
}

    .btn-impersonate:hover {
        background-color: #ede9fe !important;
        color: #4b299a !important;
    }

/* Top padding for content beneath the fixed topbar. */
#main .content {
    padding-top: 4.25rem;
    overflow-y: auto;
}

/* --- Topbar toggle / pin / caret buttons ---------------------------- */
#main-topbar .qb-toggle,
#main-topbar .pin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #6b7280;
    padding: 2px 4px;
    line-height: 1;
    transition: color .2s ease;
}

#main-topbar .qb-toggle {
    font-size: 0.75rem;
}

#main-topbar .pin-btn {
    font-size: 0.65rem;
}

#main-topbar .qb-caret {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    margin-left: 1px;
    opacity: 0.75;
    transition: opacity .2s ease, color .2s ease;
}

    #main-topbar .qb-caret.right {
        border-left: 4px solid currentColor;
    }

    #main-topbar .qb-caret.left {
        border-right: 4px solid currentColor;
    }

    #main-topbar .qb-toggle:hover,
    #main-topbar .pin-btn:hover,
    #main-topbar .qb-caret:hover {
        color: var(--orange);
    }

/* Caret/toggle colour reflects sidebar state. */
#sidenav.expanded:not(.pinned) ~ #main #main-topbar .qb-toggle,
#sidenav.expanded:not(.pinned) ~ #main #main-topbar .qb-caret {
    color: rgba(244, 130, 32, 0.9);
}

    #sidenav.expanded:not(.pinned) ~ #main #main-topbar .qb-toggle:hover,
    #sidenav.expanded:not(.pinned) ~ #main #main-topbar .qb-caret:hover {
        color: #6b7280;
    }

#sidenav.expanded.pinned ~ #main #main-topbar .qb-toggle,
#sidenav.expanded.pinned ~ #main #main-topbar .qb-caret,
#sidenav.expanded.pinned ~ #main #main-topbar .pin-btn {
    color: rgba(244, 130, 32, 0.9);
}

    #sidenav.expanded.pinned ~ #main #main-topbar .qb-toggle:hover,
    #sidenav.expanded.pinned ~ #main #main-topbar .qb-caret:hover,
    #sidenav.expanded.pinned ~ #main #main-topbar .pin-btn:hover {
        color: #6b7280;
    }

/* In impersonation mode, keep topbar icons white. */
body.impersonating #main-topbar .qb-toggle,
body.impersonating #main-topbar .qb-caret,
body.impersonating #main-topbar .pin-btn {
    color: #fff;
}

    body.impersonating #main-topbar .qb-toggle:hover,
    body.impersonating #main-topbar .qb-caret:hover,
    body.impersonating #main-topbar .pin-btn:hover {
        color: rgba(255, 255, 255, 0.7);
    }

/* Pin button has no purpose on narrow viewports (sidebar overlays). */
@media (max-width: 900px) {
    #main-topbar .pin-btn {
        display: none;
    }
}


/* =====================================================================
   SIDEBAR INTERNALS
   ===================================================================== */

/* Sidebar header block matches the topbar height so the two
   border-bottoms align visually. */
#sidenav .heading {
    font-size: 1rem;
    font-weight: 600;
    background-color: var(--bg-surface);
    color: var(--text);
    border-bottom: 1px solid var(--border);
    text-align: center;
    /* Match the topbar height exactly so the two border-bottoms align. */
    height: var(--topbar-h);
    line-height: var(--topbar-h);
    padding: 0 0.75rem;
    letter-spacing: 0.02em;
    flex: 0 0 auto;
    overflow: hidden;
}

#sidenav .nav-item {
    margin: 0.15rem 8px;
}

/* --- Sidebar nav link base style ------------------------------------ */
#sidenav .nav-link {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    width: 100%;
    box-sizing: border-box;
    color: var(--text-muted);
    background: transparent;
    text-decoration: none;
    border-radius: 8px;
    padding: 0.5rem 0.8rem 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    transition: background-color .15s, color .15s;
}

    #sidenav .nav-link .icon-container {
        flex: 0 0 20px;
        width: 20px;
        min-width: 20px;
        max-width: 20px;
        height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--text-subtle);
        font-size: 0.95rem;
        line-height: 1;
    }

        #sidenav .nav-link .icon-container i,
        #sidenav .nav-link .icon-container .bi,
        #sidenav .nav-link .icon-container .fa-solid,
        #sidenav .nav-link .icon-container .fa-regular,
        #sidenav .nav-link .icon-container span {
            color: inherit;
            font-size: inherit;
            line-height: 1;
            display: inline-block;
        }

    #sidenav .nav-link .link-text {
        flex: 1 1 auto;
        min-width: 0;
        display: block;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: inherit;
        line-height: 1.3;
    }

    /* HOVER - warm orange background + left bracket. */
    #sidenav .nav-link:hover {
        background-color: var(--orange-soft);
        color: var(--text);
    }

        #sidenav .nav-link:hover .icon-container {
            color: var(--orange);
        }

        #sidenav .nav-link:hover::before {
            content: "";
            position: absolute;
            top: 6px;
            bottom: 6px;
            left: 4px;
            width: var(--bracket-w);
            border-radius: 999px;
            background-color: var(--orange);
            pointer-events: none;
        }

    /* ACTIVE - blue is the "you are here" signal. */
    #sidenav .nav-link.active {
        background-color: var(--accent-soft);
        color: var(--accent);
    }

        #sidenav .nav-link.active .icon-container {
            color: var(--accent);
        }

        #sidenav .nav-link.active::before {
            content: "";
            position: absolute;
            top: 6px;
            bottom: 6px;
            left: 4px;
            width: var(--bracket-w);
            border-radius: 999px;
            background-color: var(--accent);
            pointer-events: none;
        }

        /* ACTIVE + HOVER - active wins; stays blue. */
        #sidenav .nav-link.active:hover {
            background-color: var(--accent-soft);
            color: var(--accent);
        }

            #sidenav .nav-link.active:hover .icon-container {
                color: var(--accent);
            }

            #sidenav .nav-link.active:hover::before {
                background-color: var(--accent);
            }

/* --- Buttons styled as nav links (Logout / Login) ------------------- */
#sidenav button.nav-link {
    position: relative;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    color: var(--text-muted);
    cursor: pointer;
}

    #sidenav button.nav-link:hover {
        background-color: var(--orange-soft);
        color: var(--text);
    }

        #sidenav button.nav-link:hover .icon-container {
            color: var(--orange);
        }

        #sidenav button.nav-link:hover::before {
            content: "";
            position: absolute;
            top: 6px;
            bottom: 6px;
            left: 4px;
            width: var(--bracket-w);
            border-radius: 999px;
            background-color: var(--orange);
            pointer-events: none;
        }

    #sidenav button.nav-link .link-text {
        color: inherit;
    }

.nav-scrollable {
    margin-top: 10px;
}

#sidenav .nav-item-list,
#sidenav .nav-scroll,
#sidenav .nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Sidebar footer --------------------------------------------------
   NOTE: A previous version of this block is commented out above the
   active footer rules below. The active rules come later on purpose.
   Keep the "fineprint + copyright" rule BEFORE the active footer
   block; it is order-sensitive. */

/*#sidenav .sidebar-footer {
    margin-top: auto;
    background-color: var(--bg-subtle);
    border-top: 1px solid var(--border);
    padding: 0.75rem;
    width: 100%;
    position: sticky;
    bottom: 0;
    z-index: 1;
    flex: 0 0 auto;
}

    #sidenav .sidebar-footer .footer-content {
        text-align: center;
        line-height: 1.4;
        font-size: 10px;
        color: var(--text-muted);
        width: 100%;
        margin-bottom: 8px;
    }

    #sidenav .sidebar-footer .fineprint,
    #sidenav .sidebar-footer .dev {
        color: var(--orange);
        display: block;
        margin-top: 2px;
    }

    #sidenav .sidebar-footer .copyright {
        color: var(--text-muted);
        display: block;
        margin-top: 4px;
    }*/

#sidenav .sidebar-footer .fineprint + .copyright {
    margin-top: 4px;
}

#sidenav .sidebar-footer {
    margin-top: auto;
    background-color: #f3f4f6;
    border-top: 1px solid #e5e7eb;
    padding: 0.4rem;
    width: 100%;
    position: sticky;
    bottom: 0;
    z-index: 1;
    flex: 0 0 auto;
}

    #sidenav .sidebar-footer .footer-content {
        text-align: center;
        line-height: 1.2;
        font-size: 0.6rem;
        color: var(--accent); /* #2563eb - same blue as active nav links */
        font-weight: 600;
        width: 100%;
        margin-bottom: 4px;
    }

    #sidenav .sidebar-footer .fineprint,
    #sidenav .sidebar-footer .dev {
        color: #4b5563;
        font-weight: 400;
        display: block;
        margin-top: 6px;
    }

    #sidenav .sidebar-footer .copyright {
        color: #4b5563;
        font-weight: 400;
        display: block;
        margin-top: 4px;
    }


#sidenav .sidebar-info {
    display: none;
}


/* =====================================================================
   LOGOS & AVATARS
   ===================================================================== */
.topbar-controls .main-logo,
.sidebar-logo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform .2s ease, box-shadow .2s ease;
    display: block;
}

.sidebar-logo {
    margin: 0 auto;
}

.topbar-controls .main-logo {
    margin-right: 8px;
    cursor: pointer;
}

    .topbar-controls .main-logo:hover,
    .sidebar-logo:hover {
        transform: scale(1.06);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
    }

/* User avatar. Hints for smooth rendering; hover just brightens. */
.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
    display: block;
    image-rendering: auto;
    transform: translateZ(0);
    will-change: transform;
    transition: none;
    backface-visibility: hidden;
}

    .user-avatar:hover {
        filter: brightness(1.06);
    }


/* =====================================================================
   IMPERSONATION BANNER
   ===================================================================== */
.impersonation-banner {
    background-color: var(--purple);
    color: #fff;
    width: 100%;
    text-align: center;
    padding: 10px 15px;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-sm);
}


/* =====================================================================
   6) QUICKGRID - DESKTOP
   ---------------------------------------------------------------------
   Horizontal drag-to-scroll wrapper. On desktop the table can exceed
   the wrapper width; the wrapper scrolls. The .dragging class is
   toggled by tables.js while a drag is in progress.
   ===================================================================== */
.table-wrapper,
.drag-scroll-enabled {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    overflow-x: auto;
    overflow-y: visible;
    position: relative;
    scroll-behavior: smooth;
}

    .table-wrapper.dragging,
    .my-rounded-grid.dragging,
    .quickgrid.dragging,
    .drag-scroll-enabled.dragging {
        cursor: grabbing !important;
        user-select: none !important;
        background-color: rgba(0, 0, 0, 0.02);
    }

    .table-wrapper table,
    .table-wrapper .my-rounded-grid,
    .table-wrapper .quickgrid,
    .drag-scroll-enabled table {
        min-width: 100%;
        width: max-content;
        border-collapse: separate;
        border-spacing: 0;
    }

    .table-wrapper *,
    .my-rounded-grid *,
    .quickgrid *,
    .drag-scroll-enabled * {
        overflow: visible !important;
    }

/* --- Rounded grid look --------------------------------------------- */
.my-rounded-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    font-size: 0.875rem;
}

    .my-rounded-grid th,
    .my-rounded-grid td {
        border: none;
        padding: 8px 12px;
        color: var(--text);
        vertical-align: middle;
        text-align: left;
    }

    .my-rounded-grid tbody tr + tr td {
        border-top: 1px solid var(--border);
    }

    .my-rounded-grid thead th {
        background-color: var(--bg-muted) !important;
        color: var(--text-muted) !important;
        font-weight: 600 !important;
        font-size: 0.8125rem !important;
        letter-spacing: 0.01em;
        height: 34px !important;
        vertical-align: middle !important;
        padding: 0 !important;
        border-bottom: 1px solid var(--border) !important;
    }

        .my-rounded-grid thead th .col-title {
            all: unset;
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 0.35rem !important;
            width: 100% !important;
            padding: 8px 12px !important;
            cursor: pointer !important;
            background: transparent !important;
            border: none !important;
            font: inherit !important;
            color: inherit !important;
        }

        .my-rounded-grid thead th .col-title-text {
            margin-left: 0 !important;
            display: flex;
            align-items: center;
        }

        .my-rounded-grid thead th .sort-indicator::before {
            content: "";
            display: inline-block;
            margin-left: 4px;
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            opacity: 0.35;
            transition: transform .15s ease, opacity .15s ease;
        }

        .my-rounded-grid thead th[aria-sort="ascending"] .sort-indicator::before {
            border-bottom: 6px solid var(--accent);
            transform: translateY(-1px);
            opacity: 1;
        }

        .my-rounded-grid thead th[aria-sort="descending"] .sort-indicator::before {
            border-top: 6px solid var(--accent);
            transform: translateY(1px);
            opacity: 1;
        }

        .my-rounded-grid thead th[aria-sort="ascending"],
        .my-rounded-grid thead th[aria-sort="descending"] {
            background-color: var(--accent-soft) !important;
            color: var(--accent) !important;
        }


    /* =====================================================================
   7) QUICKGRID ROW STATES - DESKTOP
   ---------------------------------------------------------------------
   Bracket is drawn INSIDE the first cell's left padding via ::before.
   Row states:
     • hover      → orange bracket + warm background
     • selected   → blue bracket + soft blue background + blue text
     • focus-within → treated as selected (keyboard navigation)
   These states are intentionally duplicated in the mobile breakpoint
   (see §9e) with the bracket moved outside the card.
   ===================================================================== */
    .my-rounded-grid tbody td:first-child {
        position: relative;
        padding-left: 18px !important;
    }

    /* Clear box shadows on all rows (some Blazor components add them). */
    .my-rounded-grid tbody tr:hover td:first-child,
    .my-rounded-grid tbody tr.selected-row td:first-child,
    .my-rounded-grid tbody tr.selected td:first-child,
    .my-rounded-grid tbody tr.active td:first-child,
    .my-rounded-grid tbody tr.table-active td:first-child,
    .my-rounded-grid tbody tr.is-selected td:first-child,
    .my-rounded-grid tbody tr[aria-selected="true"] td:first-child {
        box-shadow: none !important;
    }

    /* DESKTOP HOVER - ORANGE bracket + warm background. */
    .my-rounded-grid tbody tr:hover td {
        background-color: var(--bg-hover-warm) !important;
        transition: background-color .15s ease;
    }

        .my-rounded-grid tbody tr:hover td:first-child::before {
            content: "";
            position: absolute;
            top: 6px;
            bottom: 6px;
            left: 6px;
            width: var(--bracket-w);
            border-radius: 999px;
            background-color: var(--orange) !important;
            pointer-events: none;
        }

    /* DESKTOP SELECTED - BLUE bracket + blue text + soft blue background. */
    .my-rounded-grid tbody tr.selected-row td,
    .my-rounded-grid tbody tr.selected td,
    .my-rounded-grid tbody tr.active td,
    .my-rounded-grid tbody tr.table-active td,
    .my-rounded-grid tbody tr.is-selected td,
    .my-rounded-grid tbody tr[aria-selected="true"] td,
    .my-rounded-grid tbody tr:focus-within td {
        background-color: var(--accent-soft) !important;
        color: var(--accent) !important;
        transition: background-color .15s ease;
    }

        .my-rounded-grid tbody tr.selected-row td:first-child::before,
        .my-rounded-grid tbody tr.selected td:first-child::before,
        .my-rounded-grid tbody tr.active td:first-child::before,
        .my-rounded-grid tbody tr.table-active td:first-child::before,
        .my-rounded-grid tbody tr.is-selected td:first-child::before,
        .my-rounded-grid tbody tr[aria-selected="true"] td:first-child::before,
        .my-rounded-grid tbody tr:focus-within td:first-child::before {
            content: "";
            position: absolute;
            top: 6px;
            bottom: 6px;
            left: 6px;
            width: var(--bracket-w);
            border-radius: 999px;
            background-color: var(--accent) !important;
            pointer-events: none;
        }

    /* DESKTOP SELECTED HOVER - selected remains blue. */
    .my-rounded-grid tbody tr.selected-row:hover td,
    .my-rounded-grid tbody tr.selected:hover td,
    .my-rounded-grid tbody tr.active:hover td,
    .my-rounded-grid tbody tr.table-active:hover td,
    .my-rounded-grid tbody tr.is-selected:hover td,
    .my-rounded-grid tbody tr[aria-selected="true"]:hover td {
        background-color: var(--accent-soft) !important;
        color: var(--accent) !important;
    }

        .my-rounded-grid tbody tr.selected-row:hover td:first-child::before,
        .my-rounded-grid tbody tr.selected:hover td:first-child::before,
        .my-rounded-grid tbody tr.active:hover td:first-child::before,
        .my-rounded-grid tbody tr.table-active:hover td:first-child::before,
        .my-rounded-grid tbody tr.is-selected:hover td:first-child::before,
        .my-rounded-grid tbody tr[aria-selected="true"]:hover td:first-child::before {
            background-color: var(--accent) !important;
        }

    .my-rounded-grid tbody tr:focus {
        outline: none !important;
        box-shadow: none !important;
    }


/* =====================================================================
   8) QUICKGRID PAGER
   ===================================================================== */
.btn-group.mt-1 {
    margin-bottom: 1.5rem;
}

    .btn-group.mt-1 .btn-outline-secondary.btn-sm {
        border-color: var(--border-strong) !important;
        color: var(--text-muted) !important;
        background-color: var(--bg-surface) !important;
        font-weight: 500 !important;
        font-size: 0.8125rem !important;
        transition: all .15s ease-in-out !important;
    }

        .btn-group.mt-1 .btn-outline-secondary.btn-sm:hover,
        .btn-group.mt-1 .btn-outline-secondary.btn-sm:focus {
            background-color: var(--accent-soft) !important;
            color: var(--accent) !important;
            border-color: var(--accent) !important;
        }

        .btn-group.mt-1 .btn-outline-secondary.btn-sm:active {
            background-color: var(--accent) !important;
            border-color: var(--accent) !important;
            color: #fff !important;
        }

        .btn-group.mt-1 .btn-outline-secondary.btn-sm:disabled {
            opacity: 0.5 !important;
            background-color: var(--bg-muted) !important;
            color: var(--text-subtle) !important;
            border-color: var(--border) !important;
            cursor: not-allowed !important;
        }

/* Force left-align for "text-end" in the pager footer. */
.text-end {
    text-align: left !important;
}

.quickgrid-footer-text {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-subtle);
    margin-top: 0.5rem;
}


/* =====================================================================
   OVERFLOW SCROLLBAR LOGIC
   ---------------------------------------------------------------------
   The JS overflow detector (tables.js) sets data-overflow="true|false"
   on tables. We then toggle the wrapper's overflow-x to match. This
   keeps the scrollbar hidden when the table fits.
   ===================================================================== */
div[style*="overflow-x:auto"] {
    scrollbar-width: none;
}

    div[style*="overflow-x:auto"]::-webkit-scrollbar {
        height: 0;
    }

.table-wrapper:has(table[data-overflow="true"]),
.table-wrapper:has(.my-rounded-grid[data-overflow="true"]),
.table-wrapper:has(.quickgrid[data-overflow="true"]) {
    overflow-x: auto !important;
}

.table-wrapper:has(table[data-overflow="false"]),
.table-wrapper:has(.my-rounded-grid[data-overflow="false"]),
.table-wrapper:has(.quickgrid[data-overflow="false"]) {
    overflow-x: hidden !important;
}

@media (max-width: 768px) {
    div[style*="overflow-x:auto"] {
        scrollbar-width: thin;
    }

        div[style*="overflow-x:auto"]::-webkit-scrollbar {
            height: 6px;
        }
}


/* =====================================================================
   9) RESPONSIVE - STACKED TABLES (≤ 767.98px)
   ---------------------------------------------------------------------
   Below tablet width, tables convert to a card-per-row layout.
   Column headers are shown inline via td[data-label]::before, which is
   populated by the tables.js data-label injector. Each row gets its
   own orange (hover) or blue (selected) left bracket.
   ===================================================================== */
@media (max-width: 767.98px) {

    /* 9a) Force ancestor containers to full width. */
    #layout,
    #main,
    #main > .content,
    section.content,
    .content > *,
    #main .content > div[style*="overflow-x"],
    #main .content > div[style*="width:100%"],
    .table-wrapper,
    .drag-scroll-enabled,
    div:has(> table.my-rounded-grid),
    div:has(> table.quickgrid),
    div:has(> .my-rounded-grid),
    div:has(> .quickgrid) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        float: none !important;
    }

    .row > [class*="col-"],
    .row > [class*="col"],
    [class*="col-"]:has(> table.my-rounded-grid),
    [class*="col-"]:has(> table.quickgrid),
    [class*="col-"]:has(> .my-rounded-grid),
    [class*="col-"]:has(> .quickgrid) {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    table.drag-scroll-enabled,
    table.my-rounded-grid,
    table.quickgrid,
    table.quickgrid.my-rounded-grid,
    .drag-scroll-enabled table,
    .table-wrapper table,
    .table-wrapper .my-rounded-grid,
    .table-wrapper .quickgrid,
    .drag-scroll-enabled .my-rounded-grid,
    .drag-scroll-enabled .quickgrid {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: auto !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        box-sizing: border-box !important;
        float: none !important;
    }

    /* 9b) Table to block layout. */
    .my-rounded-grid,
    .my-rounded-grid thead,
    .my-rounded-grid tbody,
    .my-rounded-grid th,
    .my-rounded-grid td,
    .my-rounded-grid tr {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .my-rounded-grid {
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        overflow: visible !important;
        padding: 0 !important;
    }

        .my-rounded-grid thead {
            display: none !important;
        }

        .my-rounded-grid tbody tr:first-child {
            margin-top: 0.25rem !important;
        }

        .my-rounded-grid tbody tr:last-child {
            margin-bottom: 0.25rem !important;
        }

        /* --- 9c) Card row (default state) --- */
        .my-rounded-grid tbody tr,
        .my-rounded-grid tbody tr:has(td) {
            position: relative !important;
            display: block !important;
            width: 100% !important;
            background: var(--bg-surface) !important;
            border: 1px solid var(--border) !important;
            border-radius: var(--radius) !important;
            margin: 0 0 0.75rem 0 !important;
            padding: 0.6rem 0.9rem 0.6rem 1.25rem !important;
            box-shadow: var(--shadow-sm) !important;
            box-sizing: border-box !important;
            overflow: visible !important;
            transition: background-color .15s ease, border-color .15s ease;
        }

        /* 9d) Stacked cells. Labels come from td[data-label]. */
        .my-rounded-grid tbody td {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 1rem !important;
            width: 100% !important;
            padding: 0.5rem 0 !important;
            text-align: right !important;
            border-top: 1px dashed var(--border) !important;
            word-break: break-word !important;
            box-sizing: border-box !important;
        }

            .my-rounded-grid tbody td[data-label]::before {
                content: attr(data-label);
                flex: 0 0 auto !important;
                text-align: left !important;
                font-weight: 500 !important;
                font-size: 0.72rem !important;
                color: var(--text-muted) !important;
                text-transform: uppercase !important;
                letter-spacing: 0.04em !important;
                margin-right: auto !important;
            }

            .my-rounded-grid tbody td:not([data-label])::before {
                content: none !important;
            }

            /* First cell = card header. */
            .my-rounded-grid tbody td:first-child {
                display: block !important;
                text-align: left !important;
                font-weight: 600 !important;
                font-size: 0.95rem !important;
                padding: 0.15rem 0 0.55rem 0 !important;
                border-top: none !important;
            }

                .my-rounded-grid tbody td:first-child::before {
                    content: none !important;
                }

            /* Action buttons. */
            .my-rounded-grid tbody td:last-child {
                justify-content: flex-end !important;
                padding-top: 0.65rem !important;
            }

                .my-rounded-grid tbody td:last-child .dropdown,
                .my-rounded-grid tbody td:last-child .text-end {
                    margin-left: auto !important;
                }

        /* Reset desktop cell bracket. */
        .my-rounded-grid tbody tr td:first-child::before {
            content: none !important;
        }

        /* 9e) Mobile row states: HOVER = ORANGE, SELECTED = BLUE. */

        /* MOBILE HOVER - orange border, warm bg, orange left bracket. */
        .my-rounded-grid tbody tr:hover {
            border-color: var(--orange) !important;
            background-color: var(--orange-soft) !important;
        }

            .my-rounded-grid tbody tr:hover::before {
                content: "" !important;
                position: absolute !important;
                top: 8px !important;
                bottom: 8px !important;
                left: 8px !important;
                width: var(--bracket-w) !important;
                border-radius: 999px !important;
                background-color: var(--orange) !important;
                pointer-events: none !important;
                z-index: 2 !important;
            }

        /* MOBILE SELECTED - blue border, soft blue bg, blue text, blue bracket. */
        .my-rounded-grid tbody tr.selected-row,
        .my-rounded-grid tbody tr.selected,
        .my-rounded-grid tbody tr.active,
        .my-rounded-grid tbody tr.table-active,
        .my-rounded-grid tbody tr.is-selected,
        .my-rounded-grid tbody tr[aria-selected="true"],
        .my-rounded-grid tbody tr:focus-within {
            border-color: var(--accent) !important;
            background-color: var(--accent-soft) !important;
            color: var(--accent) !important;
        }

            .my-rounded-grid tbody tr.selected-row td,
            .my-rounded-grid tbody tr.selected td,
            .my-rounded-grid tbody tr.active td,
            .my-rounded-grid tbody tr.table-active td,
            .my-rounded-grid tbody tr.is-selected td,
            .my-rounded-grid tbody tr[aria-selected="true"] td,
            .my-rounded-grid tbody tr:focus-within td {
                background: transparent !important;
                color: var(--accent) !important;
            }

            .my-rounded-grid tbody tr.selected-row::before,
            .my-rounded-grid tbody tr.selected::before,
            .my-rounded-grid tbody tr.active::before,
            .my-rounded-grid tbody tr.table-active::before,
            .my-rounded-grid tbody tr.is-selected::before,
            .my-rounded-grid tbody tr[aria-selected="true"]::before,
            .my-rounded-grid tbody tr:focus-within::before {
                content: "" !important;
                position: absolute !important;
                top: 8px !important;
                bottom: 8px !important;
                left: 8px !important;
                width: var(--bracket-w) !important;
                border-radius: 999px !important;
                background-color: var(--accent) !important;
                pointer-events: none !important;
                z-index: 2 !important;
            }

            /* Selected wins over hover (stays blue when hovered). */
            .my-rounded-grid tbody tr.selected-row:hover,
            .my-rounded-grid tbody tr.selected:hover,
            .my-rounded-grid tbody tr.active:hover,
            .my-rounded-grid tbody tr.table-active:hover,
            .my-rounded-grid tbody tr.is-selected:hover,
            .my-rounded-grid tbody tr[aria-selected="true"]:hover {
                border-color: var(--accent) !important;
                background-color: var(--accent-soft) !important;
                color: var(--accent) !important;
            }

                .my-rounded-grid tbody tr.selected-row:hover td,
                .my-rounded-grid tbody tr.selected:hover td,
                .my-rounded-grid tbody tr.active:hover td,
                .my-rounded-grid tbody tr.table-active:hover td,
                .my-rounded-grid tbody tr.is-selected:hover td,
                .my-rounded-grid tbody tr[aria-selected="true"]:hover td {
                    background: transparent !important;
                    color: var(--accent) !important;
                }

                .my-rounded-grid tbody tr.selected-row:hover::before,
                .my-rounded-grid tbody tr.selected:hover::before,
                .my-rounded-grid tbody tr.active:hover::before,
                .my-rounded-grid tbody tr.table-active:hover::before,
                .my-rounded-grid tbody tr.is-selected:hover::before,
                .my-rounded-grid tbody tr[aria-selected="true"]:hover::before {
                    background-color: var(--accent) !important;
                }

    /* 9f) Reset drag-scroll behaviour in stacked card view. */
    .table-wrapper,
    thead.drag-scroll-enabled,
    tbody tr.drag-scroll-enabled,
    tr.drag-scroll-enabled {
        cursor: default !important;
        user-select: auto !important;
        -webkit-user-select: auto !important;
        overflow-x: hidden !important;
    }

    div.drag-scroll-enabled,
    .content div.drag-scroll-enabled,
    .content div[style*="overflow-x:auto"],
    .content div[style*="width:100%"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: block !important;
        overflow-x: visible !important;
        box-sizing: border-box !important;
    }
}


/* =====================================================================
   MOBILE DROPDOWN SPACING
   ===================================================================== */
@media (max-width: 768px) {
    .dropdown-item {
        font-size: 0.95rem;
        padding: 0.7rem 1rem;
    }
}


/* =====================================================================
   SYNCFUSION FONTS
   ---------------------------------------------------------------------
   Align the Syncfusion Document Editor's chrome with the app font so
   toolbars, dialogs, and status bars look consistent. The document
   canvas itself is explicitly excluded so the DOCX's own fonts are
   preserved in the editing area.
   ===================================================================== */

/* Base control wrappers. */
.e-control,
.e-control-wrapper,
.e-input-group,
.e-input,
.e-btn,
.e-toolbar,
.e-toolbar-item,
.e-tbar-btn,
.e-tbar-btn .e-tbar-btn-text,
.e-dropdownbase .e-list-item,
.e-ddl,
.e-ddl .e-input,
.e-ddl .e-input-group,
.e-de-toolbar,
.e-de-toolbar .e-toolbar,
.e-de-toolbar .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text,
.e-de-properties-pane,
.e-de-properties-pane .e-header,
.e-de-properties-pane .e-control,
.e-de-properties-pane .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap,
.e-de-properties-pane .e-tab .e-tab-header .e-toolbar-item .e-tab-text,
.e-de-dialog,
.e-de-dialog .e-dlg-header,
.e-de-dialog .e-dlg-content,
.e-de-dialog .e-btn,
.e-documenteditor,
.e-documenteditor .e-de-pane,
.e-documenteditor .e-de-pane .e-control,
.e-documenteditor .e-de-status-bar,
.e-de-status-bar,
.e-de-status-bar .e-de-ctnr-zoom,
.e-de-status-bar .e-de-ctnr-zoom .e-input-group,
.e-de-status-bar .e-de-ctnr-zoom .e-input {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}

    /* The document canvas itself should keep the DOCX's own fonts.
   Exclude it explicitly so the editor doesn't try to override the
   content font with the app font. */
    .e-documenteditor .e-de-pane .e-de-pane-content,
    .e-de-edit-area,
    .e-de-edit-area * {
        font-family: inherit !important;
    }


/* =====================================================================
   EMPTY-ROW CLEANUP - ALL VIEWPORTS
   ---------------------------------------------------------------------
   QuickGrid emits empty placeholder <tr> rows alongside real data rows.
   They must be hidden at every viewport - on desktop they'd just be
   blank bands, on mobile they become empty cards. This selector hides
   only rows whose every <td> is empty, so real rows are untouched.
   ===================================================================== */
.my-rounded-grid tbody tr:has(td:empty):not(:has(td:not(:empty))) {
    display: none !important;
}


/* =====================================================================
   ACCENT TEXT
   ---------------------------------------------------------------------
   Renders dynamic values in the app accent blue (e.g. highlighted
   record IDs, counts, or emphasised inline values).
   ===================================================================== */
.accent-text {
    color: var(--accent); /* #2563eb - same blue as active nav links */
    font-weight: 600;
}


/* =====================================================================
   SIDEBAR - OVERRIDE FOR BACKDROP AND BLUR
   ---------------------------------------------------------------------
   Replaces the earlier ".sidenav-backdrop" definition (§5) with a
   masked, blurred version that fades out to the right. Do not move
   this above the first definition - the second must win.
   ===================================================================== */
#layout .sidenav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.04);
    backdrop-filter: blur(6px);
    -webkit-mask-image: linear-gradient( to right, #000 0px, #000 80px, rgba(0,0,0,0.5) 140px, rgba(0,0,0,0.15) 200px, transparent 260px );
    mask-image: linear-gradient( to right, #000 0px, #000 80px, rgba(0,0,0,0.5) 140px, rgba(0,0,0,0.15) 200px, transparent 260px );
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

    #layout .sidenav-backdrop.show {
        opacity: 1;
        pointer-events: auto;
    }


/* =====================================================================
   SIDEBAR - SUBTLE SOFT EDGE
   ---------------------------------------------------------------------
   Replaces the earlier "#sidenav { border-right: 1px solid; }" with a
   softer drop shadow. Do not move this above the earlier #sidenav
   block - the second must win.
   ===================================================================== */
#sidenav {
    border-right: none !important;
    overflow: visible !important;
}

    #sidenav::after {
        content: none !important;
    }

    /* Only show the soft edge when the sidebar is visible. */
    #sidenav.expanded {
        box-shadow: 1px 0 0 rgba(16, 24, 40, 0.04), 8px 0 24px -8px rgba(16, 24, 40, 0.08) !important;
    }


/* =====================================================================
   TOPBAR AUTH LINK (Login / Logout shortcut)
   ---------------------------------------------------------------------
   Must beat the global "a { color: var(--accent) }" rule from §3, so
   it is scoped under #main-topbar and placed after that rule.
   ===================================================================== */
#main-topbar .topbar-user {
    gap: 0.5rem !important;
}

    #main-topbar .topbar-user .topbar-auth-link {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.8rem !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        color: var(--purple) !important;
        background: transparent !important;
        text-decoration: none !important;
    }

        #main-topbar .topbar-user .topbar-auth-link:hover {
            color: #4b299a !important;
            text-decoration: none !important;
        }

    #main-topbar .topbar-user > a {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
    }

    #main-topbar .topbar-user .user-avatar {
        margin: 0 !important;
        display: block !important;
        width: 32px !important;
        height: 32px !important;
    }


/* =====================================================================
   FORCE ORANGE HOVER ON SIDEBAR NAV LINKS
   ---------------------------------------------------------------------
   Something in our app is overriding the hover with black, so this
   fixes it. This block MUST remain last in the file. Moving it above
   any of the other #sidenav .nav-link rules will re-introduce the
   black hover.
   ===================================================================== */
#sidenav .nav-link:hover,
#sidenav .nav-link:hover .link-text,
#sidenav .nav-link:hover .icon-container {
    background-color: #fff7ed !important;
    color: #f48220 !important;
    border-color: #f48220 !important;
}

    #sidenav .nav-link:hover::before {
        content: "" !important;
        position: absolute !important;
        top: 6px !important;
        bottom: 6px !important;
        left: 4px !important;
        width: 3px !important;
        border-radius: 999px !important;
        background-color: #f48220 !important;
    }