/* 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(--s-border-color, var(--bs-border-color, rgba(0, 35, 63, 0.35)));
}
.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, #fff);
    color: var(--bs-body-color, #00233F);
    border: 1px solid var(--bs-border-color, rgba(0, 35, 63, 0.25));
    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: rgba(39, 132, 144, 0.12); }
.s-sidebar-search-result-title { color: var(--bs-body-color, #00233F); font-size: 13.5px; font-weight: 600; }
.s-sidebar-search-result-path { color: var(--bs-secondary-color, rgba(0, 35, 63, 0.6)); font-size: 12px; }
.s-sidebar-search-result-none { padding: 10px 12px; color: var(--bs-secondary-color, rgba(0, 35, 63, 0.6)); 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: rgba(39, 132, 144, 0.3);
}

/* ---- 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, #00233F); font-size: 14px; font-weight: 600; }
.smart-grid-empty-hint { color: var(--bs-secondary-color, rgba(0, 35, 63, 0.6)); 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;
}

/* ---- tab bar: the active screen has to be obvious ----
   The active tab was white on a near-white bar, so the tab in front read as the faintest
   thing in the row. It now carries the house navy on its top edge and sits on a bar that
   is a shade deeper than the tab itself, which is what makes a tab look raised. Colours
   ride the theme variables so the dark themes get the same treatment. */
.tab-bar {
    /* The bar is a row: the tabs take the space that is there and the overflow button keeps
       its place at the end, instead of wrapping onto a line of its own below them. */
    display: flex;
    align-items: stretch;
    background: var(--tab-bar-bg, #e4e8ee);
    border-bottom: 1px solid var(--bs-border-color, rgba(0, 35, 63, 0.18));
    position: relative;
}

.tab-list {
    flex: 1;
    min-width: 0;
}

.tab-item {
    background: var(--tab-bg, #d7dde5);
    color: var(--tab-text, #47566a);
    border-top: 3px solid transparent;
}

.tab-item:hover {
    background: var(--tab-bg-hover, #e9edf2);
}

.tab-item.active {
    background: var(--tab-bg-active, #ffffff);
    border-top-color: var(--color-primary, #00233F);
    box-shadow: 0 -2px 6px rgba(0, 35, 63, 0.12);
}

.tab-item.active .tab-title {
    color: var(--tab-text-active, #00233F);
    font-weight: 700;
}

html[class*="-dark"] .tab-bar,
[data-bs-theme="dark"] .tab-bar {
    background: rgba(255, 255, 255, 0.04);
    border-bottom-color: rgba(255, 255, 255, 0.14);
}

html[class*="-dark"] .tab-item,
[data-bs-theme="dark"] .tab-item {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.72);
}

html[class*="-dark"] .tab-item.active,
[data-bs-theme="dark"] .tab-item.active {
    background: rgba(255, 255, 255, 0.16);
    border-top-color: var(--color-secondary, #278490);
    box-shadow: none;
}

html[class*="-dark"] .tab-item.active .tab-title,
[data-bs-theme="dark"] .tab-item.active .tab-title {
    color: #ffffff;
}

/* ---- overflow menu ---- */
.tab-overflow-button {
    flex: none;
    align-self: center;
    margin: 0 8px;
    padding: 4px 10px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--bs-body-color, #00233F);
    background: var(--bs-body-bg, #ffffff);
    border: 1px solid var(--bs-border-color, rgba(0, 35, 63, 0.25));
    border-radius: 999px;
    cursor: pointer;
}

.tab-overflow-button:hover {
    border-color: var(--color-primary, #00233F);
}

.tab-overflow-menu {
    position: fixed;
    z-index: 1300;
    min-width: 220px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px;
    background: var(--bs-body-bg, #ffffff);
    border: 1px solid var(--bs-border-color, rgba(0, 35, 63, 0.25));
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.tab-overflow-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--bs-body-color, #00233F);
    font-size: 13.5px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tab-overflow-item:hover {
    background: rgba(39, 132, 144, 0.12);
}

.tab-overflow-item.active {
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--color-primary, #00233F);
}