/* Styles for the frontend-usability additions: the sidebar recents block with its
   search results panel (sidebar-nav-boost.js) and the SmartGrid empty state.
   Linked from _LayoutHead so every screen carries them.

   Colours ride on the theme variables (Bootstrap 5 / Serenity), so both light and dark
   themes render them legibly; the [data-bs-theme="dark"] blocks only adjust what the
   variables alone don't cover. */

/* ---- sidebar recents ---- */
.s-sidebar-recents {
    margin: 0 0 10px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--bs-border-color);
}
.s-sidebar-recents .s-sidebar-recent-link { font-size: 13px; }

[data-bs-theme="dark"] .s-sidebar-recents,
html[class*="-dark"] .s-sidebar-recents {
    border-bottom-color: rgba(255, 255, 255, 0.22);
}

/* ---- sidebar search results ---- */
#s-sidebar-search { position: relative; }
#s-sidebar-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1200;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    max-height: 320px;
    overflow-y: auto;
}
.s-sidebar-search-result { display: block; padding: 8px 12px; text-decoration: none; }
.s-sidebar-search-result:hover, .s-sidebar-search-result.active { background: var(--color-secondary-light); }
.s-sidebar-search-result-title { color: var(--bs-body-color); font-size: 13.5px; font-weight: 600; }
.s-sidebar-search-result-path { color: var(--bs-secondary-color); font-size: 12px; }
.s-sidebar-search-result-none { padding: 10px 12px; color: var(--bs-secondary-color); font-size: 13px; }

[data-bs-theme="dark"] .s-sidebar-search-result:hover,
[data-bs-theme="dark"] .s-sidebar-search-result.active,
html[class*="-dark"] .s-sidebar-search-result:hover,
html[class*="-dark"] .s-sidebar-search-result.active {
    background: var(--color-secondary-medium);
}

/* ---- SmartGrid empty state ---- */
.smart-grid-empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
    text-align: center;
    padding: 24px;
}
.smart-grid-empty-state button { pointer-events: auto; }
.smart-grid-empty-message { color: var(--bs-body-color); font-size: 14px; font-weight: 600; }
.smart-grid-empty-hint { color: var(--bs-secondary-color); font-size: 13px; }

/* ---- room for the browser's link preview ----
   Hovering a link makes the browser draw its URL bubble in the bottom-left corner, on top
   of whatever menu item lives there. The bubble itself is browser chrome and cannot be
   turned off, so the fix is space: the menu's scroll area ends with enough padding that
   its last entries scroll clear of the strip the bubble occupies. */
.s-sidebar-groups {
    padding-bottom: 2.5rem;
}