.hidden {
    display: none !important;
}
/* Reduce navbar height */
.navbar {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    min-height: 45px;
}
.top-navbar {
    /* Make sure the top navbar always stick to top */
    position: sticky !important;
    top: 0;
    z-index: 1048;
    border-bottom: #eeeeee 1px solid;
}
.modal {
    z-index: 1051 !important;
}
.navbar-brand,
.nav-link {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.sidebar .nav-link {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-right: 5px;
    padding-left: 5px;
}

/* Hover effect for nav-links */
.nav-link:hover {
    background-color: #e0f3ff;
    color: #007bff;
    border-radius: 0.25rem;
    transition: background-color 0.3s, color 0.3s;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #e0f3ff;
    transition: background-color 0.3s;
}

.nav-item.dropdown {
    z-index: 10000 !important;
}
/* -------------------------------------------------- */
/* Internal page scroll container (smooth UX)          */
/* -------------------------------------------------- */
:root { --app-topbar-height: 45px; --app-scrollbar-thumb:#3497DA; --app-scrollbar-thumb-hover:#2384c7; }
html, body { height:100%; }
body { 
    overflow:hidden; 
}

/* Prevent Bootstrap tooltips from causing horizontal overflow */
.tooltip {
    max-width: calc(100vw - 20px) !important;
}
.tooltip.bs-tooltip-start,
.tooltip.bs-tooltip-end {
    max-width: calc(100vw - 40px) !important;
}

/* Contain tooltips within viewport - prevent negative translate3d overflow */
body {
    position: relative;
}

.tooltip .tooltip-inner {
    max-width: calc(100vw - 24px);
    word-wrap: break-word;
}

/* Clip any overflow from fixed positioned elements */
html {
    overflow-x: clip !important;
    overflow-y: hidden;
}
body {
    overflow-x: clip !important;
}
/* Preserve layout width (avoid jump on pages shorter than viewport) */
.main-content-container { scrollbar-gutter: stable; }
.main-content-container {
    position: relative;
    height: calc(100vh - var(--app-topbar-height));
    /* Phones and tablets: 100vh is the LARGEST viewport (address bar and
       toolbar collapsed), and scrolling this inner container never collapses
       them, so the bottom 60-100px of the container sat permanently below the
       visible screen. Anything pinned to the container's bottom (the Apply bar
       on the period-pattern preview, the landing footer, the last rows of a
       long page) was unreachable. 100dvh is the viewport actually visible and
       follows the browser chrome as it shows and hides. Browsers without dvh
       ignore this line and keep the 100vh above; on desktop both are equal. */
    height: calc(100dvh - var(--app-topbar-height));
    overflow-y: auto;
    overflow-x: clip;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: transparent;
    /* Subtle fade at very top (mask) */
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.75) 0, #000 12px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.75) 0, #000 12px);
}
/* Never print the fade: Chrome turns this mask into a full-page gradient
   soft mask on EVERY printed page, so printers must flatten each page as a
   raster (a 39-page teacher print overheated a school's HP printer) and PDF
   viewers render it 5-8x slower. Invisible on paper - pure cost. */
@media print {
    .main-content-container {
        mask-image: none !important;
        -webkit-mask-image: none !important;
    }
}
body.modal-open .main-content-container { overflow:hidden; }
/* WebKit scrollbar */
.main-content-container::-webkit-scrollbar { width: 14px; }
.main-content-container::-webkit-scrollbar-track { background: var(--sp-sidebar-bg, #fff); border-radius:20px; margin-block:4px; }
.main-content-container::-webkit-scrollbar-thumb {
    background: var(--app-scrollbar-thumb);
    border-radius:24px; border:4px solid var(--sp-sidebar-bg,#fff); min-height:48px;
    box-shadow: 0 1px 2px rgba(0,0,0,.18) inset, 0 0 0 1px rgba(0,0,0,.04);
    transition: background .25s ease,border-color .25s ease, box-shadow .25s ease;
}
.main-content-container::-webkit-scrollbar-thumb:hover { background: var(--app-scrollbar-thumb-hover); }
.main-content-container::-webkit-scrollbar-corner { background: transparent; }
/* Firefox */
.main-content-container { scrollbar-width: thin; scrollbar-color: var(--app-scrollbar-thumb) var(--sp-sidebar-bg,#ffffff); }
/* Fallback: if JS disables internal scroll (edge case) */
.no-internal-scroll body { overflow:auto; }