/* Topbar working-project switcher: trigger + searchable dropdown.
   Loaded on the dashboard only. */

/* Left cluster: brand + switcher share the first topbar column. */
.topbar-lead {
    grid-column: 1;
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.project-switcher {
    position: relative;
    display: inline-flex;
    min-width: 0;
}

/* Thin divider between brand and switcher. */
.topbar-lead .project-switcher::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 22px;
    background: var(--border);
}

.ps-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 260px;
    height: 36px;
    padding: 0 8px 0 10px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
    min-width: 0;
}
.ps-trigger:hover { border-color: var(--border-strong); background: var(--bg-subtle); }
.ps-trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.project-switcher.is-open .ps-trigger {
    border-color: var(--border-strong);
    background: var(--bg-subtle);
}

.ps-trigger-icon {
    display: inline-flex;
    color: var(--text-muted);
    flex-shrink: 0;
}
.ps-label {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.ps-label.is-placeholder { color: var(--text-subtle); font-weight: 400; }

.ps-caret {
    display: inline-flex;
    color: var(--text-subtle);
    flex-shrink: 0;
    transition: transform .15s ease;
}
.project-switcher.is-open .ps-caret { transform: rotate(180deg); }

/* Dropdown panel */
.ps-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 320px;
    max-width: calc(100vw - 32px);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-dropdown);
    padding: 8px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Sheet header (title + close) — shown only in the mobile full-screen mode. */
.ps-panel-head { display: none; }
.ps-panel-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
.ps-panel-close {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.ps-panel-close:hover { color: var(--text); border-color: var(--border-strong); background: var(--bg-subtle); }
.ps-panel-close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

.ps-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-subtle);
    color: var(--text-muted);
    transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.ps-search:focus-within {
    border-color: var(--border-strong);
    box-shadow: 0 0 0 3px var(--focus-ring);
    color: var(--text);
}
.ps-search svg { flex-shrink: 0; }
.ps-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    padding: 0;
}
.ps-search input::-webkit-search-cancel-button,
.ps-search input::-webkit-search-decoration { display: none; -webkit-appearance: none; }

.ps-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ps-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px;
    border-radius: 5px;
    cursor: pointer;
    color: var(--text);
    transition: background .12s ease;
}
.ps-option:hover,
.ps-option.is-active {
    background: var(--bg-subtle);
}
.ps-option.is-selected { background: var(--bg-subtle); }

.ps-option-check {
    width: 16px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
}
.ps-option-name {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ps-option-name .project-highlight {
    background: #fff2a8;
    color: #1a1a1a;
    border-radius: 2px;
    padding: 0 1px;
    font-weight: 600;
}
html[data-theme="dark"] .ps-option-name .project-highlight {
    background: #6b5a10;
    color: #fff3a8;
}

/* Star marking the server-side active project. */
.ps-option-tag {
    display: inline-flex;
    align-items: center;
    color: var(--warning);
    flex-shrink: 0;
}
.ps-option-tag svg { fill: var(--warning); }

.ps-empty {
    padding: 14px 8px;
    text-align: center;
    font-size: 13px;
    color: var(--text-subtle);
}

/* Give the feed search room on small screens by shrinking the switcher. */
@media (max-width: 860px) {
    .ps-trigger { max-width: 180px; }
}
@media (max-width: 640px) {
    /* Deterministic topbar row: the search is the only flexible element (grows
       from a 0 basis to fill the leftover), everything else is pinned to its
       intrinsic width. Higher specificity (.topbar > …) so these win over
       responsive.css regardless of load order. */
    .topbar > .topbar-lead { flex: 0 0 auto; }
    .topbar > .topbar-actions { flex: 0 0 auto; }
    .topbar > .topbar-search {
        flex: 1 1 0%;
        width: auto;
        min-width: 0;
    }

    /* Drop the brand mark on phones — the switcher takes the lead slot, and a
       lone icon button matches the other topbar controls (lang/theme/profile). */
    .topbar-lead .brand { display: none; }
    .topbar-lead { gap: 0; }
    .topbar-lead .project-switcher::before { display: none; }

    /* Icon-only trigger, a perfect 36×36 square like the other topbar icon
       buttons (theme/lang). flex:0 0 auto stops the flex row stretching it. */
    .project-switcher { flex: 0 0 auto; }
    .ps-trigger {
        flex: 0 0 auto;
        box-sizing: border-box;
        width: 36px;
        min-width: 36px;
        max-width: 36px;
        height: 36px;
        padding: 0;
        gap: 0;
        justify-content: center;
        border-radius: 4px;
    }
    .ps-trigger .ps-label,
    .ps-trigger .ps-caret { display: none; }
    .ps-trigger-icon { color: var(--text-muted); }
    .ps-trigger-icon svg { width: 18px; height: 18px; }

    /* Full-screen sheet with header, search and a scrollable list. */
    .ps-panel {
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        gap: 0;
        z-index: 200;
    }
    .ps-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
    }
    .ps-search { margin: 12px 16px 8px; height: 44px; }
    .ps-list {
        max-height: none;
        flex: 1 1 auto;
        padding: 0 8px calc(8px + env(safe-area-inset-bottom));
        gap: 4px;
    }
    .ps-option { padding: 12px 10px; }
    .ps-option-name { font-size: 15px; }
    .ps-empty { padding: 24px 8px; }
}