/* =====================
   Base layout / structure
   ===================== */

/* Reset & html/body basics */
/* =====================
   Base layout / structure
   ===================== */

/* Root font sizing */
html, body {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

/* Font size preference — scales the root font-size so Bootstrap's rem-based typography and
   spacing grow together. Applies on top of any theme. "normal" is the browser default (no rule
   needed). Elements styled with hardcoded px (rather than rem/em) will not scale. */
html.font-size-small {
    font-size: 87.5%;
}

html.font-size-large {
    font-size: 112.5%;
}

html.font-size-xlarge {
    font-size: 125%;
}

#wrapper {
    display: flex;
    min-height: 100vh; /* full viewport height */
}

#content-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1; /* fill remaining space */
}

#content-wrapper .container-fluid {
    flex: 1; /* push footer down if page is empty */
}

/* TopNav brand visibility based on sidebar state */

#topnav-brand {
    display: flex; /* keep it flex so layout works */
    opacity: 0; /* start hidden */
    transition: opacity 0.5s ease; /* fade duration */
    pointer-events: none; /* prevents clicking when invisible */
}

#wrapper:not(.sidebar-collapsed) #topnav-brand {
    opacity: 0;
    pointer-events: none;
}

#wrapper.sidebar-collapsed #topnav-brand {
    opacity: 1;
    pointer-events: auto; /* allow interaction */
}

/* Form control focus (from default template) */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Dropdown select list */
.custom-select-width {
    width: 200px;
}

.custom-select-width-m {
    width: 370px;
}

.custom-select-width-l {
    width: 450px;
}

.indent-class {
    text-align: right;
}

.form-narrow {
    max-width: 300px;
}

.normal-class {
    text-align: center;
}

/* Selection container (top box) */
.theme-dark-selection {
    background-color: #121212;
    color: #f8f9fa;
    border: 1px solid #444;
    border-radius: 0.25rem;
    height: 38px; /* match your form-select height */
    padding: 0 0.75rem; /* match your padding */
    box-shadow: none;
}

/* The text inside the selection container */
.theme-dark-selection .select2-selection__rendered {
    color: #f8f9fa;
    line-height: 38px; /* vertically center text */
    width: 450px;
}

/* The arrow on the right side of the selection box */
.theme-dark-selection .select2-selection__arrow b {
    border-color: #f8f9fa transparent transparent transparent;
}

/* Dropdown items */
.theme-dark-dropdown .select2-results__option {
    background-color: #121212;
    color: #f8f9fa;
}

/* Highlighted / hovered item */
.theme-dark-dropdown .select2-results__option--highlighted {
    background-color: #343a40;
    color: #0d6efd;
}
/* =====================
   Wrapper / Sidebar
   ===================== */
#wrapper {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
#sidebar {
    width: 250px;
    transition: margin-left 0.3s ease;
    padding: 1rem;
}

/* Collapsed sidebar */
#wrapper.sidebar-collapsed #sidebar {
    margin-left: -250px;
}

/* Optional: make content expand smoothly */
#content-wrapper {
    transition: margin-left 0.8s ease;
}

/* Submenu arrow animation */
.submenu-arrow {
    font-size: 1rem;
    transition: transform 0.2s ease;
}

a[aria-expanded="true"] .submenu-arrow {
    transform: rotate(180deg);
}

/* Page content */
#page-content {
    flex-grow: 1;
    padding: 1rem;
}

/* TopNav spacing */
.navbar {
    padding: 0.5rem 1rem;
}

/* =====================
    menu sidebar
   ===================== */

/* Disabled items */
#sidebar .nav-link {
    font-size: 0.9rem !important; /* sets font size for all menu items */
}

.menu-disabled {
    color: #999999;
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}

#sidebar .nav .nav {
    margin-bottom: 0; /* remove extra spacing between nested ul */
}

#sidebar .nav .nav .nav-link {
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    font-size: 0.9rem;
}

/* Document embeds (Privacy, EULA, Terms) — invert Word-generated HTML for dark themes */
body.theme-dark .doc-embed,
body.theme-admin-dark .doc-embed {
    filter: invert(1) hue-rotate(180deg);
}

/* =====================
   Mobile sidebar overlay
   ===================== */
@media (max-width: 767px) {
    /* Sidebar becomes a fixed overlay — hidden by default */
    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1050;
        overflow-y: auto;
        margin-left: -250px;
    }

    /* Shown when the mobile-open class is present */
    #wrapper.sidebar-mobile-open #sidebar {
        margin-left: 0;
    }

    /* Dimming backdrop behind the open sidebar */
    #wrapper.sidebar-mobile-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1049;
    }

    /* On mobile, sidebar-collapsed has no meaningful effect on the sidebar
       (it stays hidden via the rule above regardless) */
    #wrapper.sidebar-collapsed #sidebar {
        margin-left: -250px;
    }

    /* Content wrapper fills full width — sidebar is no longer in the flow */
    #content-wrapper {
        width: 100%;
        min-width: 0;
    }

    /* ── Navbar ──────────────────────────────────────────────
       navbar-expand-md (set on the <nav>) hides the links behind a
       Bootstrap toggler on <768 px.  We only need to constrain the
       system selector so it doesn't push the always-visible bar items
       off-screen before the collapse is opened. */

    /* Shrink the system selector so it fits alongside the hamburger */
    .navbar .form-select,
    .navbar .form-select-sm {
        max-width: 130px;
        font-size: 0.75rem;
    }

    /* ── Page content ────────────────────────────────────────
       Wide tables and forms inside individual pages can still overflow
       their container.  Scroll them horizontally within the content
       area rather than expanding the whole page. */
    #page-content {
        overflow-x: auto;
    }
}

/* ── Sidebar "extract in progress" indicator ─────────────────
   Small pulsing dot on nav items with a live background job (e.g.
   Extract Inbox) — the animation is what reads as "still running"
   rather than a static unread-style badge. */
@keyframes sidebar-dot-pulse {
    0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.55); }
    70% { box-shadow: 0 0 0 5px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

.saved-search-row .nav-link span[id^="sidebar-dot-"]:not(.d-none) {
    animation: sidebar-dot-pulse 2s infinite;
}