/* ==========================================================================
   App frame + nav rail (per docs/June 30 2026 mockup)
   Rendered by base.html for all authenticated pages; the rail shows modules
   when a project is active, or just brand + Projects on global pages.
   Uses design-system.css tokens throughout.
   ========================================================================== */

:root {
    --nav-rail-w: 248px;
    --nav-rail-w-collapsed: 64px;
    --nav-accent: var(--muted-rose);
    --nav-row-h: 40px;
    --app-frame-pad: 14px;
}

/* ---- Page frame: rounded white app container on the seasalt page ---------- */
body.app-body--frame {
    height: 100vh;
    overflow: hidden;
    background: var(--seasalt-white);
}
.app-frame {
    height: 100vh;
    padding: var(--app-frame-pad);
}
.app-container {
    height: 100%;
    display: flex;
    align-items: stretch;
    background: var(--white);
    border: 1px solid var(--grey-lighter);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.nav-shell__content {
    flex: 1 1 auto;
    min-width: 0;              /* critical: stops wide tables overflowing the flex item */
    display: flex;
    flex-direction: column;
}
.app-content {
    flex: 1 1 auto;
    overflow-y: auto;
    /* Premium-but-quiet entrance: replays on every rail content-swap because the
       swap recreates this element (and once on full load). */
    animation: app-content-in 0.18s ease-out;
}
@keyframes app-content-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .app-content { animation: none; }
}
.app-content .section {
    padding: 1.75rem 2rem;     /* tighter than Bulma's default 3rem, per mockup density */
}

/* ---- Rail ----------------------------------------------------------------- */
.nav-rail {
    flex: 0 0 var(--nav-rail-w);
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-right: 1px solid var(--grey-lighter);
    font-family: 'Work Sans', sans-serif;
    font-size: 0.9rem;
    transition: flex-basis 0.15s ease;
}

/* Brand header: rose tile + MODUS / workspace name */
.nav-rail__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-s);
    padding: 0 var(--spacing-m);
    min-height: 64px;
    border-bottom: 1px solid var(--grey-lighter);
}
.nav-rail__tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: var(--border-radius-md);
    background: var(--muted-rose);
    color: var(--white);
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.05rem;
}
.nav-rail__titles { min-width: 0; }
.nav-rail__wordmark {
    font-weight: 700;
    letter-spacing: 0.32em;
    font-size: 0.92rem;
    color: var(--onyx);
    line-height: 1.3;
}
.nav-rail__workspace {
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--grey);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-rail__project-chip {
    padding: var(--spacing-xs) var(--spacing-m);
    font-size: 0.72rem;
    color: var(--grey);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Scroll region */
.nav-rail__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--spacing-xs) 0 var(--spacing-m);
}

/* Rows */
.nav-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-s);
    height: var(--nav-row-h);
    padding: 0 var(--spacing-m);
    color: var(--onyx);
    border-left: 3px solid transparent;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.nav-row:hover { background: var(--seasalt-white); color: var(--onyx); text-decoration: none; }
.nav-row__status { flex: 0 0 18px; text-align: center; font-size: 1rem; }
.nav-row__icon { flex: 0 0 18px; text-align: center; color: var(--grey); font-size: 0.8rem; }
/* Module icon: hidden expanded (flat checkbox list per mockup), shown collapsed */
.nav-row__module-icon { display: none; flex: 0 0 18px; text-align: center; color: var(--grey); font-size: 0.85rem; }
.nav-row.is-active .nav-row__module-icon { color: var(--nav-accent); }
.nav-row__label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-row__chevron {
    flex: 0 0 auto;
    opacity: 0;
    color: var(--nav-accent);
    font-size: 0.68rem;
    transition: opacity 0.12s ease;
}
.nav-row:hover .nav-row__chevron { opacity: 0.45; }

/* Pinned project-level group (Projects / Overview / Results) — differentiated */
.nav-rail__pinned {
    padding-bottom: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--grey-lighter);
}
.nav-row--pinned {
    height: 34px;
    font-size: 0.82rem;
    color: var(--grey);
}
.nav-row--pinned:hover { color: var(--onyx); }
.nav-row--pinned.is-active { color: var(--nav-accent); }

/* Beta pill — quiet grey, per mockup */
.nav-row__beta {
    flex: 0 0 auto;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--grey);
    background: var(--grey-lighter);
    border-radius: var(--border-radius-pill);
    padding: 2px 8px;
    line-height: 1.2;
}

/* Active row: tint bg + accent bar + red text + chevron */
.nav-row.is-active {
    background: var(--tint-danger);
    border-left-color: var(--nav-accent);
    color: var(--nav-accent);
    font-weight: 600;
}
.nav-row.is-active .nav-row__icon,
.nav-row.is-active .nav-row__status i { color: var(--nav-accent); }
.nav-row.is-active .nav-row__chevron { opacity: 1; }

/* Status glyphs: uniform OUTLINED squares; colour carries the state */
.nav-status--not_started i { color: var(--grey-light); }
.nav-status--in_progress i { color: var(--warm-amber); }
.nav-status--complete i { color: var(--reseda-green); }

/* Footer / collapse */
.nav-rail__footer {
    border-top: 1px solid var(--grey-lighter);
    padding: var(--spacing-xs);
}
.nav-rail__collapse {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--spacing-s);
    padding: var(--spacing-xs) var(--spacing-s);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--grey);
    border-radius: var(--border-radius-sm);
    font-family: inherit;
    font-size: 0.85rem;
    position: relative;
}
/* Invisible vertical hit-area expansion to ~44px (WCAG 2.5.5); the footer has
   no other interactive elements, so the taller target overlaps nothing */
.nav-rail__collapse::after { content: ""; position: absolute; inset: -7px 0; }
.nav-rail__collapse:hover { background: var(--seasalt-white); color: var(--onyx); }

/* ==========================================================================
   Collapsed state — .nav-collapsed (JS) and html.nav-preload-collapsed
   (anti-flash before JS runs).
   ========================================================================== */
.nav-shell.nav-collapsed .nav-rail,
html.nav-preload-collapsed .nav-shell .nav-rail { flex-basis: var(--nav-rail-w-collapsed); }

.nav-shell.nav-collapsed .nav-row__label,
.nav-shell.nav-collapsed .nav-row__chevron,
.nav-shell.nav-collapsed .nav-row__beta,
.nav-shell.nav-collapsed .nav-row__status,
.nav-shell.nav-collapsed .nav-rail__titles,
.nav-shell.nav-collapsed .nav-rail__project-chip,
.nav-shell.nav-collapsed .nav-rail__collapse-label,
html.nav-preload-collapsed .nav-shell .nav-row__label,
html.nav-preload-collapsed .nav-shell .nav-row__chevron,
html.nav-preload-collapsed .nav-shell .nav-row__beta,
html.nav-preload-collapsed .nav-shell .nav-row__status,
html.nav-preload-collapsed .nav-shell .nav-rail__titles,
html.nav-preload-collapsed .nav-shell .nav-rail__project-chip,
html.nav-preload-collapsed .nav-shell .nav-rail__collapse-label { display: none; }

/* Collapsed rows: the status checkbox says nothing at 64px; show the module icon */
.nav-shell.nav-collapsed .nav-row__module-icon,
html.nav-preload-collapsed .nav-shell .nav-row__module-icon { display: inline-block; }

.nav-shell.nav-collapsed .nav-row,
html.nav-preload-collapsed .nav-shell .nav-row {
    justify-content: center;
    padding: 0 var(--spacing-xs);
}
.nav-shell.nav-collapsed .nav-rail__header,
html.nav-preload-collapsed .nav-shell .nav-rail__header { justify-content: center; padding: 0; }
.nav-shell.nav-collapsed .nav-rail__collapse,
html.nav-preload-collapsed .nav-shell .nav-rail__collapse { justify-content: center; }
/* Pre-paint only: the template ships fa-chevron-left, so mirror it until
   nav-rail.js swaps the class (which removes nav-preload-collapsed). */
html.nav-preload-collapsed .nav-shell .nav-rail__collapse .nav-row__icon { transform: rotate(180deg); }

/* ==========================================================================
   Page-header bar (eyebrow + title | status pill + avatar)
   ========================================================================== */
.page-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-m);
    min-height: 64px;
    padding: var(--spacing-s) var(--spacing-l);
    border-bottom: 1px solid var(--grey-lighter);
    background: var(--white);
    flex: 0 0 auto;
}
.page-header-bar__titles { min-width: 0; }
.page-header-bar__eyebrow {
    font-size: 0.72rem;
    color: var(--grey);
    line-height: 1.2;
}
.page-header-bar__title {
    font-family: 'Work Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--deep-slate-blue);
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.page-header-bar__meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-s);
    flex: 0 0 auto;
}

/* ==========================================================================
   Avatar menu (details-based dropdown)
   ========================================================================== */
.avatar-menu { position: relative; }
.avatar-menu summary { list-style: none; cursor: pointer; position: relative; }
.avatar-menu summary::-webkit-details-marker { display: none; }
/* Invisible hit-area expansion: the 36px circle keeps its look but taps land
   on a 44px target (WCAG 2.5.5) */
.avatar-menu summary::after { content: ""; position: absolute; inset: -4px; }
/* Some browsers skip the global :focus-visible on summary elements (WCAG 2.4.7) */
.avatar-menu summary:focus-visible {
    outline: 2px solid var(--deep-teal);
    outline-offset: 2px;
    border-radius: 50%;
}
.avatar-menu__circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--deep-teal);
    color: var(--white);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
}
.avatar-menu[open] .avatar-menu__circle { box-shadow: 0 0 0 3px var(--tint-info); }
.avatar-menu__dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 180px;
    background: var(--white);
    border: 1px solid var(--grey-lighter);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-xs);
    z-index: 60;
}
.avatar-menu__name {
    padding: var(--spacing-xs) var(--spacing-s);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--onyx);
    border-bottom: 1px solid var(--grey-lighter);
    margin-bottom: var(--spacing-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Doubled-up selector beats the global button[type="submit"] fallback in
   design-system.css, which otherwise restyles Logout into a wide rose button
   that overflows the dropdown. */
.avatar-menu__dropdown .avatar-menu__item {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: var(--spacing-xs) var(--spacing-s);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--onyx);
    background: none;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
}
.avatar-menu__dropdown .avatar-menu__item:hover { background: var(--seasalt-white); color: var(--onyx); }
.avatar-menu__dropdown .avatar-menu__logout:hover { color: var(--cinnabar); }

/* Slim action row on the project overview (status tag + edit button) */
.overview-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-s);
    margin-bottom: var(--spacing-m);
}

/* ==========================================================================
   Lightweight content cards (mockup card language)
   ========================================================================== */
.content-card {
    background: var(--white);
    border: 1px solid var(--grey-lighter);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-l);
    margin-bottom: var(--spacing-l);
}
.content-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-m);
    padding-bottom: var(--spacing-s);
    border-bottom: 1px solid var(--grey-lighter);
    margin-bottom: var(--spacing-m);
}
.content-card__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-s);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--deep-slate-blue);
    margin: 0;
}
.content-card .table { background: transparent; }
.content-card .table td,
.content-card .table th { border-color: var(--grey-lighter); }

/* ==========================================================================
   Global (non-project) header
   ========================================================================== */
.global-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-s) var(--spacing-l);
    background: var(--white);
    border-bottom: 1px solid var(--grey-lighter);
}
.global-header__brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-s);
    text-decoration: none;
}
.global-header__wordmark {
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.32em;
    font-size: 0.92rem;
    color: var(--onyx);
}

/* ==========================================================================
   Flyout (Tippy theme "nav") — unchanged interaction
   ========================================================================== */
.tippy-box[data-theme~="nav"] {
    background: var(--white);
    color: var(--onyx);
    border: 1px solid var(--grey-lighter);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
}
.tippy-box[data-theme~="nav"] .tippy-content { padding: 0; }
.tippy-box[data-theme~="nav"] .tippy-arrow { color: var(--white); }
.nav-flyout { min-width: 220px; font-family: 'Work Sans', sans-serif; }
.nav-flyout__title {
    font-weight: 600;
    color: var(--nav-accent);
    padding: var(--spacing-s) var(--spacing-m);
    border-bottom: 1px solid var(--grey-lighter);
}
.nav-flyout__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-m);
    padding: var(--spacing-s) var(--spacing-m);
    color: var(--onyx);
    text-decoration: none;
}
.nav-flyout__item:hover { background: var(--seasalt-white); color: var(--onyx); text-decoration: none; }
.nav-flyout__item.is-active { background: var(--tint-danger); color: var(--nav-accent); }
.nav-flyout__item.is-active .nav-flyout__label { font-weight: 600; }

/* ==========================================================================
   Mobile: off-canvas drawer (<= 768px, matching isMobile() in nav-rail.js;
   an exactly-768px iPad gets the drawer, not a cramped desktop rail)
   ========================================================================== */
.nav-drawer-backdrop { display: none; }
.nav-rail-burger {
    display: none;
    background: none;
    border: none;
    color: var(--grey);
    font-size: 1.1rem;
    cursor: pointer;
    padding: var(--spacing-xs);
    position: relative;
}
/* Invisible hit-area expansion to ~44px (WCAG 2.5.5); layout is untouched */
.nav-rail-burger::after { content: ""; position: absolute; inset: -7px; }

@media (max-width: 768px) {
    .app-frame { padding: 0; }
    .app-container { border-radius: 0; border: none; }
    .nav-rail {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 45;
        width: 82vw;
        max-width: 320px;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: var(--shadow-lg);
    }
    .nav-shell.nav-drawer-open .nav-rail { transform: translateX(0); }
    .nav-rail__footer { display: none; }   /* collapse is desktop-only */

    .nav-shell.nav-drawer-open .nav-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 44;
        background: rgba(0, 0, 0, 0.4);
    }
    .nav-rail-burger { display: inline-flex; align-items: center; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .nav-rail,
    .nav-row,
    .nav-row__chevron { transition: none; }
}

/* ==========================================================================
   Print: unclamp the app shell so content flows across printed pages.
   The frame locks the body to 100vh and scrolls inside .app-content, which
   would otherwise print as a single clipped viewport with scrollbars.
   ========================================================================== */
@media print {
    body.app-body--frame {
        height: auto;
        overflow: visible;
    }
    .app-frame {
        height: auto;
        padding: 0;
    }
    .app-container {
        height: auto;
        display: block;
        overflow: visible;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    .nav-shell__content { display: block; }
    .app-content {
        overflow: visible;
        animation: none;
    }
    .nav-rail,
    .nav-drawer-backdrop,
    .page-header-bar,
    .global-header { display: none; }
}