/*
 * The app bar every page shares (src/chrome.rs renders it). Page-specific
 * controls belong in a toolbar row beneath it, styled by .sx-toolbar.
 */

.sx-appbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 48px;
    padding: 0 0.75rem;
    flex-shrink: 0;
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    font-size: 0.875rem;
}

.sx-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.sx-workspace {
    font-weight: 600;
    color: var(--bs-body-color);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22rem;
    min-width: 3rem;
}
a.sx-workspace:hover { text-decoration: underline; }

.sx-tabs {
    display: flex;
    align-self: stretch;
    gap: 0.125rem;
    margin-left: 0.5rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.sx-tab {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.7rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.sx-tab:hover { color: var(--bs-body-color); }
.sx-tab.active {
    color: var(--bs-body-color);
    font-weight: 600;
    border-bottom-color: var(--bs-primary);
}

.sx-appbar-end {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}

/* "More" is a <details>, not a Bootstrap dropdown: the vendored Bootstrap
   bundle has no Popper. */
.sx-more { position: relative; }
.sx-more > summary { list-style: none; }
.sx-more > summary::-webkit-details-marker { display: none; }
.sx-more-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1100;
    min-width: 12rem;
    padding: 0.25rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
/* Menu entries: links, buttons, and labelled radios/checkboxes. */
.sx-more-menu a, .sx-more-menu button, .sx-more-menu label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.35rem 0.6rem;
    border: 0;
    border-radius: 0.25rem;
    background: none;
    color: var(--bs-body-color);
    font: inherit;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.sx-more-menu a:hover, .sx-more-menu button:hover, .sx-more-menu label:hover {
    background: var(--bs-tertiary-bg);
}
.sx-more-menu i { color: var(--bs-secondary-color); width: 1rem; text-align: center; }
.sx-more-menu input { margin: 0; }
.sx-more-menu kbd {
    margin-left: auto;
    padding-left: 1.5rem;
    background: none;
    border: 0;
    color: var(--bs-secondary-color);
    font-family: var(--bs-font-sans-serif);
    font-size: 0.75rem;
}
.sx-menu-sep { height: 1px; margin: 0.25rem 0.35rem; background: var(--bs-border-color); }
.sx-menu-label {
    padding: 0.35rem 0.6rem 0.15rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}
/* The dark-mode entry is a checkbox item: a tick when on. */
#themeToggle .sx-check { margin-left: auto; visibility: hidden; color: var(--bs-body-color); }
#themeToggle[aria-checked="true"] .sx-check { visibility: visible; }
/* A menu that opens to the right of its button rather than to the left. */
.sx-more-menu.sx-menu-start { left: 0; right: auto; }

/* A page's own controls, one row beneath the app bar. */
.sx-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    min-height: 44px;
    padding: 0.35rem 0.75rem;
    flex-shrink: 0;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    font-size: 0.875rem;
}

/* Narrow windows: tabs keep their icons, lose their words. */
@media (max-width: 1100px) {
    .sx-tab span { display: none; }
    .sx-tab { padding: 0 0.6rem; }
    .sx-workspace { max-width: 12rem; }
}
@media (max-width: 520px) {
    .sx-workspace { display: none; }
}

@media print {
    .sx-appbar, .sx-toolbar { display: none !important; }
}

/* ---- Find (⌘K): the button in the bar, and the palette it opens ---- */

.sx-find {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 13rem;
    padding: 0.2rem 0.4rem 0.2rem 0.6rem;
    color: var(--bs-secondary-color);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    cursor: pointer;
}
.sx-find:hover { color: var(--bs-body-color); border-color: var(--bs-secondary-color); }
.sx-find-text { margin-right: auto; }
.sx-find-key, .sx-palette kbd {
    font-family: var(--bs-font-sans-serif);
    font-size: 0.7rem;
    padding: 0.05rem 0.35rem;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
}
@media (max-width: 1100px) {
    .sx-find { min-width: 0; }
    .sx-find-text, .sx-find-key { display: none; }
}

.sx-palette-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12vh 1rem 1rem;
    background: rgba(15, 23, 42, 0.35);
}
.sx-palette-backdrop[hidden] { display: none; }

.sx-palette {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    max-height: 70vh;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.6rem;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    font-size: 0.875rem;
}

.sx-pal-field {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.sx-pal-field i { color: var(--bs-secondary-color); }
.sx-pal-field input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font-size: 1rem;
}

.sx-pal-list {
    list-style: none;
    margin: 0;
    padding: 0.35rem;
    overflow-y: auto;
}
.sx-pal-group {
    padding: 0.5rem 0.6rem 0.2rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}
.sx-pal-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.375rem;
    cursor: pointer;
}
.sx-pal-item > i { color: var(--bs-secondary-color); flex-shrink: 0; }
.sx-pal-item.active { background: var(--bs-primary-bg-subtle); }
.sx-pal-item.active > i { color: var(--bs-primary-text-emphasis); }
.sx-pal-text {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    min-width: 0;
}
.sx-pal-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; }
.sx-pal-label mark { padding: 0; background: none; color: inherit; font-weight: 700; }
.sx-pal-secondary {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sx-pal-empty { padding: 1rem 0.6rem; color: var(--bs-secondary-color); }

.sx-pal-foot {
    display: flex;
    gap: 1rem;
    padding: 0.45rem 1rem;
    border-top: 1px solid var(--bs-border-color);
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}
.sx-pal-foot kbd { margin-right: 0.15rem; }