/* Overrides for the SlimSelect library (libraries/slimselect.min.css loads after this file). */

/* SlimSelect Multi-select custom styling */
.ss-main.filter-btn {
    padding: 0 !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    background: var(--card) !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    min-width: 140px !important;
    max-width: 200px !important;
    position: relative !important;
}

.ss-main.filter-btn .ss-multi-selected {
    border: none !important;
    background: transparent !important;
    padding: 0 12px !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

/* Hide default selected value tags completely */
.ss-main.filter-btn .ss-multi-selected .ss-values {
    display: none !important;
}

.ss-main.filter-btn .ss-multi-selected .ss-add {
    display: none !important;
}

.ss-main.filter-btn .ss-multi-selected .ss-placeholder {
    display: none !important;
}

/* Custom Checkbox Option List Styling */
.ss-main.filter-btn .ss-content {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    min-width: 180px !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04) !important;
    background: var(--card) !important;
    margin-top: 4px !important;
    overflow: hidden !important;
    z-index: 1000 !important;
}

.ss-main.filter-btn .ss-content .ss-list .ss-option {
    display: flex !important;
    align-items: center !important;
    padding: 8px 12px !important;
    font-size: var(--fs-xs) !important;
    color: var(--text) !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}

.ss-main.filter-btn .ss-content .ss-list .ss-option:hover {
    background-color: var(--bg) !important;
}

/* Prepend checkbox square (multi-select only) */
.ss-main.filter-btn .ss-multi-selected ~ .ss-content .ss-list .ss-option:before {
    content: "" !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    border: 1.5px solid var(--muted) !important;
    border-radius: 4px !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
}

/* Selected option checkmark (multi-select only) */
.ss-main.filter-btn .ss-multi-selected ~ .ss-content .ss-list .ss-option.ss-option-selected {
    background-color: transparent !important;
    color: var(--text) !important;
}

.ss-main.filter-btn .ss-multi-selected ~ .ss-content .ss-list .ss-option.ss-option-selected:hover {
    background-color: var(--bg) !important;
}

.ss-main.filter-btn .ss-multi-selected ~ .ss-content .ss-list .ss-option.ss-option-selected:before {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    content: "\2713" !important; /* Unicode checkmark */
    color: #ffffff !important;
    font-size: var(--fs-2xs) !important;
    font-weight: bold !important;
    line-height: 11px !important;
    text-align: center !important;
}

/* SlimSelect Single-select styling adjustments */
.ss-main.filter-btn .ss-single-selected {
    border: none !important;
    background: transparent !important;
    padding: 0 12px !important;
    height: 100% !important;
    font-size: var(--fs-xs) !important;
    color: var(--text) !important;
    font-weight: 500 !important;
}

.ss-main.filter-btn .ss-single-selected .ss-arrow span {
    border-color: var(--muted) !important;
}

/* Highlight the selected option in single-select filters to make it easily identifiable */
.ss-main.filter-btn .ss-single-selected ~ .ss-content .ss-list .ss-option.ss-option-selected,
.ss-main.filter-btn .ss-single-selected ~ .ss-content .ss-list .ss-option.ss-disabled.ss-option-selected {
    background-color: var(--accent) !important;
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 600 !important;
}

/* ── searchable selects in a form modal (SlimSelect) ──────────
   The issue form's goal, epic and assignee; the epic form's goal; the
   mapping form's goal and epic. SlimSelect copies the select's .form-select
   class onto its wrapper, so the wrapper is reset and the inner box takes
   the .form-select look instead.
   Scoped by id: the library's own stylesheet loads after this one. */
:is(#issueModal, #epicModal, #mappingModal, #otherWorkModal) .ss-main.form-select {
    padding: 0;
    border: none;
    background: none;
}

:is(#issueModal, #epicModal, #mappingModal, #otherWorkModal) .ss-main .ss-single-selected {
    min-height: 32px;
    height: auto;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-2);
    font-size: var(--fs-xs);
    color: var(--text);
    transition: border-color .15s, background .15s;
}

:is(#issueModal, #epicModal, #mappingModal, #otherWorkModal) .ss-main .ss-single-selected:hover {
    border-color: #B3BAC5;
}

:is(#issueModal, #epicModal, #mappingModal, #otherWorkModal) .ss-main.ss-open-below .ss-single-selected,
:is(#issueModal, #epicModal, #mappingModal, #otherWorkModal) .ss-main.ss-open-above .ss-single-selected {
    border-color: var(--accent);
    background: #fff;
}

:is(#issueModal, #epicModal, #mappingModal, #otherWorkModal) .ss-main .ss-single-selected .placeholder {
    line-height: 1.4;
}

:is(#issueModal, #epicModal, #mappingModal, #otherWorkModal) .ss-main .ss-single-selected .placeholder .ss-disabled {
    color: var(--faint-ink);
}

:is(#issueModal, #epicModal, #mappingModal, #otherWorkModal) .ss-main .ss-single-selected.ss-disabled {
    background: var(--surface-3);
    cursor: not-allowed;
    opacity: .85;
}

:is(#issueModal, #epicModal, #mappingModal, #otherWorkModal) .ss-main .ss-single-selected .ss-arrow span {
    border-color: var(--muted-ink);
}

/* ── searchable selects in a page toolbar (SlimSelect) ───────
   The goal filter on Issues, the scope picker on Analytics. SlimSelect
   copies the select's own classes onto its wrapper, so the wrapper is reset
   and the inner box takes the `.inline select` look — the row reads the same
   whether a control is a plain select or a searchable one, and a select
   carrying .plain-select keeps that quieter look below. The library's
   stylesheet loads after this file, so every rule here is a class deeper
   than its `.ss-main`. */
.inline .ss-main {
    width: auto;
    min-width: 190px;
    max-width: 280px;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
}

.inline .ss-main .ss-single-selected {
    height: auto;
    min-height: 34px;
    padding: 5px 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    font-size: var(--fs-sm);
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}

.inline .ss-main.ss-open-below .ss-single-selected,
.inline .ss-main.ss-open-above .ss-single-selected {
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}

.inline .ss-main .ss-single-selected .placeholder {
    line-height: 1.4;
}

.inline .ss-main .ss-single-selected .ss-arrow span {
    border-color: var(--muted-ink);
}

/* .plain-select is the scope picker on Analytics and the person picker on
   Review: the .inline select look, deliberately without the focus ring, and
   roomier because a goal title is a sentence. Opening it still shows in the
   border — that state is transient, which is what .plain-select objects to
   in the first place. */
.inline .ss-main.plain-select {
    min-width: 260px;
    max-width: 440px;
}

.inline .ss-main.plain-select .ss-single-selected {
    padding: 6px 8px;
    background: var(--surface-2);
    box-shadow: none;
    font-size: var(--fs-md);
}

.inline .ss-main.plain-select.ss-open-below .ss-single-selected,
.inline .ss-main.plain-select.ss-open-above .ss-single-selected {
    box-shadow: none;
}

/* ── searchable selects on the worksheet and calendar ────────
   "Whose sheet" in the worksheet topline and "Calendar of" on the calendar
   (both .ws-viewer), and "waiting on" inside each card's blocked form.
   None sits in an .inline toolbar, so each takes the look of the select it
   replaces (pages/worksheet.css). The card one is redrawn with its card —
   see patSlimDrop() in common/render.js. */
.ws-viewer .ss-main,
.ws-blockform .ss-main {
    width: auto;
    padding: 0;
    border: none;
    background: none;
}

.ws-viewer .ss-main {
    min-width: 170px;
    max-width: 270px;   /* the longest names on the team still fit unclipped */
}

.ws-viewer .ss-main .ss-single-selected {
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: var(--fs-sm);
    color: var(--ws-ink);
}

.ws-blockform .ss-main {
    min-width: 180px;
    max-width: 240px;
}

.ws-blockform .ss-main .ss-single-selected {
    height: auto;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--ws-line);
    border-radius: 8px;
    background: #fff;
    font-size: var(--fs-sm);
    color: var(--ws-ink);
}

/* The label is the flex column the control sits in; it must not stretch the
   control to the label's width. */
.ws-blockform label .ss-main {
    align-self: flex-start;
}

.ss-content.pat-ss-list {
    z-index: 1300;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(9, 30, 66, .16);
    font-size: var(--fs-sm);
}

.ss-content.pat-ss-list .ss-search input {
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: var(--fs-sm);
    padding: 7px 9px;
    height: auto;
}

.ss-content.pat-ss-list .ss-search input:focus {
    border-color: var(--accent);
    box-shadow: none;
}

.ss-content.pat-ss-list .ss-list {
    max-height: 240px;
}

.ss-content.pat-ss-list .ss-list .ss-option {
    padding: 7px 10px;
}

.ss-content.pat-ss-list .ss-list .ss-option:hover,
.ss-content.pat-ss-list .ss-list .ss-option.ss-highlighted {
    background: var(--primary-soft);
    color: var(--primary-hover);
}

.ss-content.pat-ss-list .ss-list .ss-option.ss-option-selected {
    background: #E9F2FF;
    color: var(--primary-hover);
    font-weight: 600;
}