/* Thin app-level styling on top of Keen. Most styling comes from Keen. */

/* Acronym tooltip affordance: dotted underline, no layout shift. */
abbr.neo-acronym[data-bs-toggle="tooltip"] {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    cursor: help;
}

/* "Check your understanding" answers: hidden behind a "Reveal answer" affordance
   that swaps to the model answer on hover/focus (see LessonController). */
.neo-reveal { cursor: help; outline: none; }
.neo-reveal .neo-reveal-text { display: none; font-style: italic; }
.neo-reveal-label {
    color: var(--bs-primary);
    font-style: italic;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}
.neo-reveal:hover .neo-reveal-label,
.neo-reveal:focus .neo-reveal-label,
.neo-reveal:focus-within .neo-reveal-label { display: none; }
.neo-reveal:hover .neo-reveal-text,
.neo-reveal:focus .neo-reveal-text,
.neo-reveal:focus-within .neo-reveal-text { display: inline; }

/* Lesson instructional images: centred, responsive figure expanded from an
   [[image:ID]] anchor (see ImageRenderer). The "pending" variant shows while the
   artwork is still being produced, so the lesson never shows a broken image. */
.neo-lesson-figure {
    display: block;
    text-align: center;
}
.neo-lesson-figure img {
    width: 100%;
    height: auto;
    background: var(--bs-body-bg);
}
.neo-figure-caption {
    font-style: italic;
}
.neo-figure-pending .neo-figure-placeholder {
    border: 1px dashed var(--bs-border-color);
    border-radius: 0.625rem;
    background: var(--bs-gray-100);
    aspect-ratio: 16 / 9;
    padding: 1.5rem;
}

/* Flow diagram nodes */
.neo-flow { display: flex; flex-wrap: wrap; gap: 0; align-items: stretch; }
.neo-flow-stage {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.625rem;
    padding: 0.85rem 1rem;
    min-width: 130px;
    cursor: pointer;
    background: var(--bs-body-bg);
    transition: border-color .15s, box-shadow .15s;
}
.neo-flow-stage:hover,
.neo-flow-stage:focus,
.neo-flow-stage.active,
.neo-flow-stage-active {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
    outline: none;
}
.neo-flow-arrow { color: currentColor; }
.neo-flow-panel { border-left: 4px solid var(--bs-primary) !important; }
.neo-flow-detail > :last-child { margin-bottom: 0; }
@media (max-width: 767.98px) {
    .neo-flow { flex-direction: column; }
    .neo-flow > span.text-gray-400 { transform: rotate(90deg); align-self: center; }
}

.neo-plan-lesson { transition: background .15s; }
.neo-plan-lesson:hover { background: var(--bs-gray-100); }

/* Glossary search box: dropping form-control-sm matches the header search-bar
   height; widen it and reserve room for the leading magnifier icon (added in
   glossary.js). */
.neo-glossary-search {
    width: 320px;
    max-width: 100%;
}

/* Glossary row jumped-to from a search result: tint the matching acronym so it
   stands out among any near-matches the server-side search also returns. */
#neo-glossary tr.neo-acr-hit > td {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}
#neo-glossary tr.neo-acr-hit > td:first-child { color: var(--bs-primary) !important; }

/* Sidebar menu scrolls internally (logo stays pinned via KTScroll, see
   views/layout/app.php) with no visible scrollbar in any engine. */
#kt_app_sidebar_menu_wrapper {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#kt_app_sidebar_menu_wrapper::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* Fixed top bar.
   The Keen fixed header is transparent by default, so page content scrolled
   up behind the search bar showed through it. Give the header the page
   background so it reads as a solid full-width top bar (the sidebar/gap to its
   left already shows the same body background) and nothing scrolls under it. */
.app-header { background-color: var(--bs-app-bg-color); }

@media (min-width: 992px) {
    /* Pull the sidebar logo up out of the sidebar's top gap so it sits inside
       the header band, vertically centred on the search bar, and size it to the
       search-bar height. Left edge stays aligned with the CURRICULUM heading. */
    .app-sidebar-logo {
        min-height: var(--bs-app-header-height, 70px);
        /* Pull up by the sidebar gap, but leave a 20px gap above the logo. */
        margin-top: calc(-1 * var(--bs-app-sidebar-gap-top, 30px) + 20px);
        padding-top: 0;
        padding-bottom: 0;
        display: flex;
        align-items: center;
    }
    .app-sidebar-logo .app-sidebar-logo-default {
        height: 120px !important;
    }
}