/* Organisation Settings modal (feature flags + custom config).
   Adds a maximise/restore toggle and a header search box, mirroring the Document Vectors modal's
   window chrome so the two admin modals behave the same way. */

/* ── Window sizing ──────────────────────────────────────────────────────────
   Restore-down is the original 860px card; maximised fills the overlay's padded box (the base
   .modal-window-overlay flex-centres inside 20px of padding, so 100% is already inset). */
.modal-window-container.ofs-container {
    width: min(860px, calc(100vw - 40px));
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.modal-window-container.ofs-container.ofs-maximized {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
}

/* ── Maximise / restore toggle ──────────────────────────────────────────────
   Sits to the left of the close button, which is 30px wide at right: 12px. */
.ofs-window-toggle {
    position: absolute;
    top: 12px;
    right: 50px;
    width: 30px;
    height: 30px;
    border: none;
    outline: none;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background 0.2s, color 0.2s;
    z-index: 2;
}

.ofs-window-toggle:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* ── Button icon/label spacing ──────────────────────────────────────────────
   The rows are built in JS, so `<span class="fa-…"></span><span>Remove</span>` has no whitespace
   text node between the icon and the label and they render flush against each other. Flexing the
   button gives a real gap regardless of how the markup was produced. */
.modal-window-container.ofs-container .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Toolbar buttons that wrap their content in a <p> (the markup-authored ones) need the gap on
   that inner element instead. */
.modal-window-container.ofs-container .btn > p {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

/* ── Header search ──────────────────────────────────────────────────────────
   Lives in the header title row, right-aligned. The 88px right margin clears the maximise
   (right: 50px) and close (right: 12px) buttons with an 8px gap. */
.ofs-search {
    position: relative;
    flex: 0 1 300px;
    min-width: 180px;
    margin-right: 88px;
}

/* Long org names would otherwise push the search field off the header — let the title ellipsise
   instead (flex items default to min-width: auto, which refuses to shrink below their text). */
.modal-window-container.ofs-container .modal-window-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ofs-search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    height: 32px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.ofs-search-field:focus-within {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

.ofs-search-icon {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    flex-shrink: 0;
}

.ofs-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #fff;
    font-size: 0.875rem;
    padding: 0;
}

.ofs-search-input::placeholder {
    color: rgba(255, 255, 255, 0.65);
}

.ofs-search-clear {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
    line-height: 1;
    border-radius: 50%;
    visibility: hidden;
}

.ofs-search.ofs-has-query .ofs-search-clear {
    visibility: visible;
}

.ofs-search-clear:hover {
    color: #fff;
}

/* ── Results dropdown ───────────────────────────────────────────────────────
   Anchored to the search box. The header carries z-index: 1 so this paints above the scrolling
   content area without needing a portal. */
.ofs-results {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(460px, 78vw);
    max-height: 340px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #d8dee4;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    padding: 4px;
    z-index: 5;
    display: none;
    text-align: left;
}

.ofs-search.ofs-open .ofs-results {
    display: block;
}

.ofs-results-empty {
    padding: 14px 12px;
    color: #888;
    font-size: 0.85rem;
    font-style: italic;
}

.ofs-results-heading {
    padding: 8px 10px 4px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7b8794;
}

.ofs-result {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.ofs-result:hover,
.ofs-result.ofs-active {
    background: #eef6f6;
}

.ofs-result-body {
    flex: 1;
    min-width: 0;
}

.ofs-result-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: #1f2933;
    word-break: break-word;
}

.ofs-result-desc {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: #6b7684;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ofs-result-state {
    flex-shrink: 0;
    align-self: center;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.ofs-result-state.ofs-state-added {
    background: #e6f4f1;
    color: #0c6e63;
}

.ofs-result-state.ofs-state-add {
    background: #eef1f4;
    color: #607085;
}

.ofs-result:hover .ofs-result-state.ofs-state-add,
.ofs-result.ofs-active .ofs-result-state.ofs-state-add {
    background: #008080;
    color: #fff;
}

/* Narrow viewports: the header has no room for a 300px field beside the title, so drop the
   search onto its own line under it. */
@media (max-width: 700px) {
    .modal-window-container.ofs-container .modal-window-header-title-row {
        flex-wrap: wrap;
    }

    .ofs-search {
        flex: 1 1 100%;
        margin-right: 0;
        margin-top: 10px;
    }

    .ofs-results {
        width: 100%;
    }
}