/* =============================================================================
 * LRES-UK Platform — shell features (audit build WAVE 3b, Agent A)
 *
 * Self-contained styles for the shell-level features wired in app.js:
 *   P-048  Sidebar accordion — MULTI-OPEN since MAB-001 (UAT A2/A3): sections
 *          open independently, state persisted per user, DAILY open by default.
 *          These styles are state-driven (.nav-acc-collapsed / .nav-acc-hidden)
 *          so they needed no change.
 *   P-049  Independent sidebar scroll + overlay-style (fading) scrollbar
 *   P-050/051  Ctrl/Cmd+K command palette (global search + Ask LRES AI)
 *   P-045  Pop-out panels push content aside (below a breakpoint → overlay)
 *
 * Brand only: green #009A42 / #00B050, anthracite #1F2937, RAG amber/red.
 * NO blue. en-GB. Matches the existing main.css token set.
 * The desktop nav rail is hidden ≤768px (mobile.css), so the accordion /
 * independent-scroll rules are scoped to ≥769px.
 * ========================================================================== */

/* ── P-048 · Sidebar accordion (multi-open) ────────────────────────────────
 * Section headers become clickable toggles. A collapse chevron is drawn with
 * ::after so no markup change is needed. Links hidden by the accordion carry
 * .nav-acc-hidden (independent of the RBAC `hidden` attribute set by
 * applyNavAccess, so the two never fight). */
@media (min-width: 769px) {
    .nav-rail .nav-section {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        transition: color .12s;
    }
    .nav-rail .nav-section:hover { color: rgba(255, 255, 255, 0.55); }

    /* Collapse chevron — sits at the right edge of the section header. */
    .nav-rail .nav-section::after {
        content: "";
        width: 6px;
        height: 6px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);          /* open = points down */
        transition: transform .16s ease;
        opacity: .6;
        flex-shrink: 0;
        margin-right: 2px;
    }
    .nav-rail .nav-section.nav-acc-collapsed::after {
        transform: rotate(-45deg);         /* collapsed = points up */
    }
}

/* Hidden by accordion collapse. !important so it beats the base .nav-link
   display:flex regardless of source order. */
.nav-link.nav-acc-hidden { display: none !important; }

/* ── P-049 · Independent sidebar scroll + overlay (fading) scrollbar ────────
 * The rail sticks below the (now sticky) topbar and scrolls inside its own
 * viewport-height box, independent of the main content. --lres-topbar-h is
 * measured in JS (initShellFeatures) so the offset tracks the real topbar. */
@media (min-width: 769px) {
    .topbar {
        position: sticky;
        top: 0;
        z-index: 200;
    }
    /* `clip` prevents sideways scroll WITHOUT turning .shell into a scroll
       container — unlike `hidden`, which would break the sticky rail. */
    .shell {
        overflow-x: clip;
    }
    .nav-rail {
        position: sticky;
        top: var(--lres-topbar-h, 51px);
        align-self: flex-start;
        height: calc(100vh - var(--lres-topbar-h, 51px));
        /* Overlay scrollbar: no reserved gutter, thumb fades in on hover/scroll. */
        scrollbar-width: none;             /* Firefox: hidden until .nav-scrolling */
        scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
    }
    .nav-rail.nav-scrolling,
    .nav-rail:hover {
        scrollbar-width: thin;             /* Firefox: reveal on hover/scroll */
    }
    /* WebKit / Chromium / Safari — true overlay style, NO grey track. */
    .nav-rail::-webkit-scrollbar {
        width: 8px;
        background: transparent;
    }
    .nav-rail::-webkit-scrollbar-track { background: transparent; }
    .nav-rail::-webkit-scrollbar-thumb {
        background: transparent;           /* invisible at rest */
        border-radius: 8px;
        border: 2px solid transparent;
        background-clip: padding-box;
        transition: background-color .2s;
    }
    .nav-rail:hover::-webkit-scrollbar-thumb,
    .nav-rail.nav-scrolling::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.28);
        background-clip: padding-box;
    }
    .nav-rail:hover::-webkit-scrollbar-thumb:hover {
        background-color: rgba(255, 255, 255, 0.42);
        background-clip: padding-box;
    }
}

/* ── P-045 · Pop-out panels push content aside ─────────────────────────────
 * When a right-docked panel opens, the shell reserves --lres-panel-w on the
 * right so the panel sits BESIDE the content rather than over it. Below the
 * breakpoint there isn't room, so the class is inert and panels overlay as
 * before (the panel code drops the dimming backdrop only in push mode). */
body.lres-shell-push .shell {
    transition: padding-right .24s ease;
}
@media (min-width: 1200px) {
    body.lres-shell-push .shell {
        padding-right: var(--lres-panel-w, 540px);
    }
}

/* ── P-050/051 · Command palette ───────────────────────────────────────────
 * Ctrl/Cmd+K. One box: global search + "Ask LRES AI" + slash-scopes.
 * Fully keyboard-navigable; Esc closes. */
#lresCmdkOverlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    background: rgba(31, 41, 55, 0.42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    padding: 12vh 16px 16px;
    box-sizing: border-box;
}
#lresCmdkOverlay.lres-open { display: block; }

#lresCmdkPanel {
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    overflow: hidden;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    max-height: 72vh;
    animation: lresCmdkIn .16s ease-out;
}
@keyframes lresCmdkIn {
    from { opacity: 0; transform: translateY(-8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.lres-cmdk-inputrow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid #eef0f2;
}
.lres-cmdk-inputrow svg { width: 18px; height: 18px; color: #009A42; flex-shrink: 0; }
#lresCmdkInput {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    font-size: 16px;
    color: #1F2937;
    background: transparent;
    font-family: Arial, sans-serif;
}
#lresCmdkInput::placeholder { color: #9CA3AF; }
.lres-cmdk-scopetag {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: #009A42;
    background: #EAF3DE;
    border: 1px solid #b7dab0;
    border-radius: 6px;
    padding: 3px 8px;
    text-transform: lowercase;
    letter-spacing: .02em;
}
.lres-cmdk-esc {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    color: #6B7280;
    background: #f3f4f6;
    border-radius: 5px;
    padding: 3px 7px;
}

.lres-cmdk-results {
    overflow-y: auto;
    padding: 6px 0 8px;
}
.lres-cmdk-grouphdr {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #9CA3AF;
    padding: 10px 18px 4px;
}
.lres-cmdk-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 18px;
    cursor: pointer;
    border-left: 3px solid transparent;
}
.lres-cmdk-item .lres-cmdk-ic { flex: none; font-size: 16px; width: 20px; text-align: center; }
.lres-cmdk-item .lres-cmdk-txt { min-width: 0; flex: 1; }
.lres-cmdk-item .lres-cmdk-label {
    font-size: 13.5px;
    color: #1F2937;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lres-cmdk-item .lres-cmdk-sub {
    font-size: 11px;
    color: #9CA3AF;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lres-cmdk-item.lres-cmdk-active,
.lres-cmdk-item:hover {
    background: #f0fdf4;
    border-left-color: #009A42;
}
.lres-cmdk-item.lres-cmdk-ask.lres-cmdk-active,
.lres-cmdk-item.lres-cmdk-ask:hover {
    background: #EAF3DE;
}
.lres-cmdk-empty { padding: 18px; font-size: 12.5px; color: #9CA3AF; text-align: center; }

/* Ask-LRES answer bubble inside the palette. */
.lres-cmdk-answer {
    margin: 4px 18px 12px;
    padding: 12px 14px;
    background: #f6fbf3;
    border: 1px solid #cbe6c0;
    border-radius: 10px;
    font-size: 13px;
    color: #1F2937;
    line-height: 1.5;
    white-space: pre-wrap;
}
.lres-cmdk-answer .lres-cmdk-answer-hd {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #009A42;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.lres-cmdk-answer .lres-cmdk-srcs {
    margin-top: 9px;
    font-size: 11px;
    color: #6B7280;
}
.lres-cmdk-answer .lres-cmdk-srcs a { color: #009A42; text-decoration: none; font-weight: 600; }
.lres-cmdk-scopehints {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 18px 4px;
}
.lres-cmdk-scopehints .lres-cmdk-chip {
    font-size: 10.5px;
    font-weight: 600;
    color: #374151;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 99px;
    padding: 3px 10px;
    cursor: pointer;
}
.lres-cmdk-scopehints .lres-cmdk-chip:hover { background: #EAF3DE; border-color: #b7dab0; color: #166534; }
.lres-cmdk-foot {
    padding: 8px 18px;
    border-top: 1px solid #eef0f2;
    font-size: 10.5px;
    color: #9CA3AF;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.lres-cmdk-foot kbd {
    font-family: Arial, sans-serif;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 10px;
    color: #374151;
}

/* ── Board / whiteboard RAG legend (HOOKS-C P-038) ─────────────────────────
 * Brand-only RAG, matching the EV/CPI dials. */
.lres-board-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 11px;
    color: #6B7280;
    padding: 8px 2px;
}
.lres-board-legend .lres-legend-dot {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.lres-board-legend .lres-legend-dot i {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

/* ── Relationship-score composition popover (HOOKS-C P-034) ────────────────*/
.lres-relscore-clickable { cursor: pointer; }
#lresRelScorePop {
    position: absolute;
    z-index: 3200;
    width: 300px;
    max-width: 92vw;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
    padding: 14px 16px;
    font-family: Arial, sans-serif;
}
#lresRelScorePop .lres-rsp-hd {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #009A42;
    margin-bottom: 10px;
}
#lresRelScorePop .lres-rsp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
}
#lresRelScorePop .lres-rsp-row .lres-rsp-lbl { flex: none; width: 78px; font-size: 11px; color: #374151; font-weight: 600; }
#lresRelScorePop .lres-rsp-row .lres-rsp-bar { flex: 1; height: 7px; background: #F3F4F6; border-radius: 4px; overflow: hidden; }
#lresRelScorePop .lres-rsp-row .lres-rsp-bar i { display: block; height: 100%; background: #009A42; border-radius: 4px; }
#lresRelScorePop .lres-rsp-row .lres-rsp-pts { flex: none; width: 44px; text-align: right; font-size: 11px; font-weight: 700; color: #1F2937; }
#lresRelScorePop .lres-rsp-foot { border-top: 1px solid #f3f4f6; margin-top: 4px; padding-top: 9px; font-size: 11px; color: #6B7280; }

/* ── P-046 responsive baseline — fluid media ────────────────────────────────
   Universally-safe: media never forces horizontal overflow, capped to its
   container and aspect-preserving. No layout risk (only caps oversized media). */
img, video { max-width: 100%; height: auto; }
svg, canvas { max-width: 100%; }