/* App-specific overrides — extend scsu-design-system.css here */

/* ============================================================================
   LAYOUT — sidebar + main content
   ============================================================================ */

#api-header {
    width: 100%;
    position: relative;
    z-index: 1000;
}

.content-wrapper {
    display: flex;
    min-height: calc(100vh - 140px);
}

/* ============================================================================
   SIDEBAR — styles inherited from scsu-main-styles.css
   Override only app-specific behaviour below
   ============================================================================ */

.sidebar {
    /* Base styles from scsu-main-styles.css */
}

.sidebar__inner {
    /* Base styles from scsu-main-styles.css */
}

.sidebar__title {
    /* Base styles from scsu-main-styles.css */
}

.sidebar__title a {
    /* Base styles from scsu-main-styles.css */
}

.sidebar__title a:hover {
    /* Base styles from scsu-main-styles.css */
}

.sidebar__nav {
    /* Base styles from scsu-main-styles.css */
}

.sidebar__nav li {
    /* Base styles from scsu-main-styles.css */
}

.sidebar__nav a {
    /* Base styles from scsu-main-styles.css */
}

/* Accessibility: enhanced focus for sidebar links */
.sidebar__nav a:focus {
    outline: 3px solid #fff;
    outline-offset: -3px;
    background-color: #404040;
}

.sidebar__nav a:hover {
    /* Base styles from scsu-main-styles.css */
}

.sidebar__close-trigger {
    display: none; /* Hidden on desktop — sidebar is always visible */
}

/* User info section */
.sidebar__user-info {
    padding: 1rem;
    border-top: 1px solid #ededed;
    font-size: 0.875rem;
    margin-top: 0.875rem;
}

.sidebar__user-info .user-name {
    font-weight: 600;
    color: #ffffff;
    display: block;
    margin-bottom: 0.25rem;
}

.sidebar__user-info .sign-out-link {
    color: #e0e0e0 !important;
    font-size: 0.85rem;
    text-decoration: underline;
}

.sidebar__user-info .sign-out-link:hover {
    color: #ffffff !important;
}

.sidebar__user-info .sign-out-link:focus {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* ============================================================================
   MOBILE NAV BAR — toggle-only bar for pages where HideHeadline=true
   ============================================================================ */

.mobile-nav-bar {
    display: none;
}

/* ============================================================================
   HEADLINE BAR — styles from scsu-main-styles.css
   ============================================================================ */

.headline {
    /* Base styles from scsu-main-styles.css */
}

.headline__title {
    /* Base styles from scsu-main-styles.css */
}

/* Sidebar toggle button for mobile */
.headline__sidebar-toggle {
    display: none; /* Hidden by default, shown on mobile via media query */
}

/* ============================================================================
   MAIN PAGE AREA
   ============================================================================ */

/* Two-column department list (A–Z on Home and DeptList pages) */
ul.columns {
    column-count: 2;
    column-gap: 2rem;
}

@media (max-width: 576px) {
    ul.columns {
        column-count: 1;
    }
}

.page {
    flex: 1;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.page__content {
    padding: 2rem;
    flex: 1;
}

/* ============================================================================
   FOOTER
   ============================================================================ */

#api-footer {
    width: 100%;
    clear: both;
}

/* ============================================================================
   RESPONSIVE — mobile sidebar overlay
   ============================================================================ */

@media (max-width: 1024px) {
    .content-wrapper {
        flex-direction: column;
    }

    .mobile-nav-bar {
        display: flex;
        align-items: center;
        background-color: #b31b34;
        padding: 0.25rem 1rem;
    }

    /* Sidebar slides in from the left as a partial overlay (not full width)
       so users can see the page edge and tap outside to close. */
    .sidebar {
        width: 280px;
        max-width: 85vw;
        position: fixed;
        top: 0;
        left: -320px; /* far enough off-screen that shadow doesn't bleed */
        height: 100%;
        z-index: 9999;
        transition: left 0.3s ease;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.4);
    }

    .sidebar.is-active {
        left: 0;
    }

    /* Semi-transparent backdrop — lets users see the page and tap to close. */
    .sidebar.is-active::after {
        content: '';
        position: fixed;
        top: 0;
        left: 280px;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: -1;
    }

    /* X close button — top-right corner of the sidebar panel.
       Visibility handled by app.css via .sidebar--visible toggled in site.js. */
    .sidebar__close-trigger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        width: 44px;
        height: 44px;
        padding: 0 !important;
        font-size: 1.25rem !important;
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border-radius: 4px !important;
        z-index: 10;
    }

    .sidebar__close-trigger span {
        display: inline-block !important;
        color: #ffffff !important;
        font-size: 1.25rem !important;
    }

    .sidebar__close-trigger:hover,
    .sidebar__close-trigger:focus {
        background: rgba(255, 255, 255, 0.3) !important;
    }

    .headline__sidebar-toggle {
        display: inline-block;
    }
}

/* ── Admin separator in sidebar ─────────────────────────────────────────── */
.sidebar__admin-separator hr {
    border-color: #555;
    opacity: 1;
}

.sidebar__nav .sidebar__section-label {
    display: block;
    padding: 0.35rem 1rem 0.2rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #aaa;
    pointer-events: none;
    border-bottom: none;
}

.sidebar__nav li:has(.sidebar__section-label) {
    border-bottom: none;
}

/* ── Privacy footer ──────────────────────────────────────────────────────── */
.page__privacy-footer {
    padding: 1rem 1.25rem 0.5rem;
    border-top: 1px solid #dee2e6;
    margin-top: 2rem;
}

.page__privacy-footer a {
    color: inherit;
}

/* ── Search form layout — scsu-main-styles.css interference fixes ────────────
   scsu-main-styles.css applies these rules globally to all forms:
     form                          { padding-top: 40px }
     form:not(#aspnetForm) > *     { margin-bottom: 1.875rem }
     button (in form context)      { margin-bottom: 16px }
   These break Bootstrap's row/col inline form layout used on the Home,
   People, and Departments search pages. Overrides are scoped to .page__content
   (all Search app pages) to fix all three search forms consistently.
   !important required to beat the ID-in-:not() specificity (1,0,1). */

.page__content form {
    padding-top: 0 !important;
}

.page__content form:not(#aspnetForm) > * {
    margin-bottom: 0 !important;
}

/* Restore breathing room below hint text (e.g. "Enter a keyword..."). */
.page__content form .form-text {
    margin-top: 0.25rem;
}

/* btn-scsu-primary (~44px) is taller than Bootstrap's default form-control
   (~38px). Match heights so inputs bottom-align flush with buttons in forms
   with no visible label (e.g. Department Search). */
.page__content .form-control {
    min-height: calc(1.5em + 1rem + 4px);
}

/* col-auto must be a flex container so its buttons bottom-align with adjacent
   input columns. Without this, align-items:flex-end on the row aligns the
   col-auto box bottom but buttons float to the top of that box. */
.page__content .col-auto {
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
}

/* scsu-main-styles sets margin-bottom: 16px on buttons inside forms.
   In a flex container with align-items:flex-end, this margin counts as part
   of the item, lifting the visible button 16px above the bottom edge. */
.page__content .col-auto .btn {
    margin-bottom: 0;
}