/* ==========================================================================
   layout.css — App shell skeleton
   Semantic class names: .app-header, .app-sidebar, .app-content,
   .app-footer, .app-wrapper. No AdminLTE naming.
   ========================================================================== */

/* Full-height wrapper */
.app-wrapper {
    min-height: 100vh;
    position: relative;
}

/* ── Header ────────────────────────────────────────────────────────────── */

.app-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: var(--c-color-surface);
    border-bottom: 1px solid var(--c-color-border);
    transition: margin-left 0.3s ease-in-out;
}

/* ── Sidebar ───────────────────────────────────────────────────────────── */

.app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    min-height: 100%;
    z-index: 1038;
    overflow: hidden;
    /* sidebar.css sets width and handles transitions */
}

/* Scrollable inner area */
.app-sidebar .sidebar {
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Content area ──────────────────────────────────────────────────────── */

.app-content {
    min-height: calc(100vh - 3.5rem);
    display: flex;
    flex-direction: column;
    transition: margin-left 0.3s ease-in-out;
}

/* Main content section fills remaining vertical space */
.app-content > .content {
    flex: 1;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.app-footer {
    background-color: var(--c-color-surface);
    border-top: 1px solid var(--c-color-border);
    transition: margin-left 0.3s ease-in-out;
}

/* Footer links — grouped, aligned, consistent with the portal */
.app-footer-links {
    row-gap: 0.25rem;
}

/* The floating chat FAB (candidates) is a fixed 56px button anchored to the
   lower-right. On desktop the footer links are right-aligned, so reserve a
   clear zone on the right of the footer nav to guarantee the button can
   overhang the footer band without ever covering the Privacy/Cookie links. */
@media (min-width: 768px) {
    body.app-no-sidebar .app-footer-links {
        padding-right: calc(56px + var(--c-space-lg) * 2);
    }
}

.app-footer-link.btn-link {
    color: var(--c-color-text-muted);
    font-family: var(--c-font-family);
    font-size: var(--c-font-size-sm);
    font-weight: var(--c-font-weight-medium);
    text-decoration: none;
    padding: 0.375rem 0.75rem;
    border-radius: var(--c-radius-sm);
}

.app-footer-link.btn-link:hover {
    color: var(--c-color-primary);
    text-decoration: underline;
}

.app-footer-link.btn-link:focus-visible {
    outline: 2px solid var(--c-color-border-focus);
    outline-offset: 2px;
    text-decoration: none;
}

/* ── Layout mode: no sidebar (candidates, referees) ────────────────────── */

body.app-no-sidebar .app-content,
body.app-no-sidebar .app-footer,
body.app-no-sidebar .app-header {
    margin-left: 0 !important;
}

/* ── Layout: fixed body ────────────────────────────────────────────────── */

body.app-layout-fixed {
    overflow-x: hidden;
}

/* ── Layout: fixed footer ──────────────────────────────────────────────── */

body.app-footer-fixed .app-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1020;
}

body.app-footer-fixed .app-content {
    padding-bottom: 3rem;
}

/* Candidate / referee (no-sidebar) pages: the fixed footer overlaps page
   content, cards, tables and action buttons at every breakpoint and competes
   with the floating chat widget. Let the footer flow normally after content
   for these pages across ALL breakpoints. Admin (has-sidebar) keeps the fixed
   footer. */
body.app-footer-fixed.app-no-sidebar .app-footer {
    position: static;
}

body.app-footer-fixed.app-no-sidebar .app-content {
    padding-bottom: 0;
}

/* Clearance below the footer links so the floating chat button (fixed
   bottom-right, ~56px + margin) never covers them once scrolled to the bottom.
   Applied on all breakpoints since the footer now flows in-document. */
body.app-no-sidebar .app-footer {
    padding-bottom: calc(var(--c-space-2xl) + var(--c-space-2xl));
}

/* ── Sidebar collapsed (icon-only mode) ────────────────────────────────── */

body.sidebar-collapse .app-sidebar {
    width: 4.6rem;
    overflow: visible;
}

body.sidebar-collapse .app-sidebar .nav-sidebar > .nav-item > .nav-link p {
    display: none;
    visibility: hidden;
    width: 0;
    height: 0;
    overflow: hidden;
}

body.sidebar-collapse .app-sidebar .user-panel {
    display: none !important;
}

body.sidebar-collapse .app-sidebar .app-brand-text {
    display: none;
    visibility: hidden;
    width: 0;
}

/* Hide inline submenus in collapsed mode — force flyout model */
body.sidebar-collapse .app-sidebar .nav-treeview {
    display: none !important;
}

/* Each nav-item becomes a positioning context for its flyout */
body.sidebar-collapse .app-sidebar .nav-sidebar > .nav-item {
    position: relative;
}

/* Show flyout submenu on hover/focus in collapsed mode */
body.sidebar-collapse .app-sidebar .nav-sidebar > .nav-item:hover > .nav-treeview,
body.sidebar-collapse .app-sidebar .nav-sidebar > .nav-item.flyout-open > .nav-treeview {
    display: block !important;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 200px;
    max-width: 260px;
    z-index: 1050;
    border-radius: 0 6px 6px 0;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3);
    margin: 0;
    padding: 6px 0;
}

/* Center icons in collapsed nav links — top-level only */
body.sidebar-collapse .app-sidebar .nav-sidebar > .nav-item > .nav-link {
    justify-content: center;
    padding: 0;
    height: 44px;
    width: 44px;
    margin: 2px auto;
    border-radius: 8px;
}

body.sidebar-collapse .app-sidebar .nav-sidebar > .nav-item > .nav-link .nav-icon {
    margin-right: 0;
    font-size: 1.1rem;
}

/* ── Content header (page title bar) ──────────────────────────────────── */

.app-content-header {
    padding: 0.75rem 1rem;
}

.app-content-header h1 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}