/* ===================================================================
   Search box (Gmail-style) + Global filter + Active context banner
   =================================================================== */

/* ----- Search box ----- */
.meerkat-navbar [data-guide="search"] {
    overflow: visible;
}

.search-box-wrapper {
    flex-grow: 1;
    max-width: 480px;
    overflow: visible;
}

.search-box {
    position: relative;
    background: rgba(var(--meerkat-plan-surface-rgb), 0.12);
    border-radius: 8px;
    transition: background 0.2s, box-shadow 0.2s;
}

.search-box:focus-within {
    background: var(--meerkat-surface-raised);
    box-shadow: 0 2px 8px rgba(var(--meerkat-black-rgb), 0.24);
}

.search-box-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(var(--meerkat-plan-surface-rgb), 0.6);
    font-size: 0.85rem;
    pointer-events: none;
    transition: color 0.2s;
}

.search-box:focus-within .search-box-icon {
    color: var(--meerkat-muted);
}

.search-box-input {
    border: none;
    background: transparent;
    color: var(--meerkat-surface-raised);
    padding: 8px 36px 8px 36px;
    font-size: 0.9rem;
    width: 100%;
    outline: none;
}

.search-box-input::placeholder {
    color: rgba(var(--meerkat-plan-surface-rgb), 0.5);
}

.search-box:focus-within .search-box-input {
    color: var(--meerkat-ink);
}

.search-box:focus-within .search-box-input::placeholder {
    color: var(--meerkat-muted-2);
}

/* Modal search (light surface; matches focused navbar field) */
#navbarSearchModal .search-box {
    background: var(--meerkat-surface-subtle);
    border: 1px solid var(--meerkat-border);
    border-radius: 8px;
}
#navbarSearchModal .search-box:focus-within {
    background: var(--meerkat-surface-raised);
    box-shadow: 0 2px 8px rgba(var(--meerkat-black-rgb), 0.12);
    border-color: var(--meerkat-disabled);
}
#navbarSearchModal .search-box-icon {
    color: var(--meerkat-muted);
}
#navbarSearchModal .search-box-input {
    color: var(--meerkat-ink);
}
#navbarSearchModal .search-box-input::placeholder {
    color: var(--meerkat-muted-2);
}
#navbarSearchModal .search-results-dropdown {
    position: static;
    margin-top: 8px;
    max-height: min(50vh, 360px);
    width: 100%;
    min-width: 0;
    max-width: none;
}

/* ----- Search type chips (navbar + full search page) ----- */
.search-type-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin-top: 6px;
    max-width: 100%;
}
.search-type-filters-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(var(--meerkat-plan-surface-rgb), 0.55);
    margin-right: 2px;
}
#navbarSearchModal .search-type-filters-label,
.filter-dropdown .search-type-filters-label,
.search-page-wrap .search-type-filters-label {
    color: var(--meerkat-muted);
}
.search-type-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(var(--meerkat-plan-surface-rgb), 0.22);
    background: rgba(var(--meerkat-black-rgb), 0.12);
    color: rgba(var(--meerkat-plan-surface-rgb), 0.85);
    font-size: 0.7rem;
    font-weight: 500;
    padding: 1px 7px 2px;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.3;
    user-select: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}
.search-type-chip:hover {
    background: rgba(var(--meerkat-plan-surface-rgb), 0.1);
    border-color: rgba(var(--meerkat-plan-surface-rgb), 0.35);
}
.search-type-chip:not(.is-active) {
    opacity: 0.4;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
#navbarSearchModal .search-type-chip,
.filter-dropdown .search-type-chip,
.search-page-wrap .search-type-chip,
.search-box:focus-within + .search-type-filters .search-type-chip,
.search-box-wrapper:has(.search-box:focus-within) .search-type-filters .search-type-chip {
    background: var(--meerkat-surface-raised);
    border: 1px solid var(--meerkat-disabled);
    color: var(--meerkat-ink-2);
}
#navbarSearchModal .search-type-chip:hover,
.filter-dropdown .search-type-chip:hover,
.search-page-wrap .search-type-chip:hover,
.search-box-wrapper:has(.search-box:focus-within) .search-type-filters .search-type-chip:hover {
    border-color: var(--meerkat-muted-2);
    background: var(--meerkat-plan-cream);
}
.search-type-chip.is-active {
    font-weight: 600;
    border-color: var(--meerkat-primary);
    color: var(--meerkat-ink);
}
#navbarSearchModal .search-type-chip.is-active,
.filter-dropdown .search-type-chip.is-active,
.search-page-wrap .search-type-chip.is-active,
.search-box-wrapper:has(.search-box:focus-within) .search-type-filters .search-type-chip.is-active {
    background: var(--meerkat-plan-cream);
    border-color: var(--meerkat-plan-amber-500);
    color: var(--meerkat-primary-active);
    opacity: 1;
    text-decoration: none;
}

/* Active type chips use the same semantic palette as Explore tree filters (`--type-*` tokens). */
#navbarSearchModal .search-type-chip[data-type="domain"].is-active,
.filter-dropdown .search-type-chip[data-type="domain"].is-active,
.search-page-wrap .search-type-chip[data-type="domain"].is-active,
.search-box-wrapper:has(.search-box:focus-within) .search-type-filters .search-type-chip[data-type="domain"].is-active {
    background: var(--type-domain-bg);
    border-color: var(--type-domain-border);
    color: var(--type-domain-fg);
}
#navbarSearchModal .search-type-chip[data-type="subject"].is-active,
.filter-dropdown .search-type-chip[data-type="subject"].is-active,
.search-page-wrap .search-type-chip[data-type="subject"].is-active,
.search-box-wrapper:has(.search-box:focus-within) .search-type-filters .search-type-chip[data-type="subject"].is-active {
    background: var(--type-subject-bg);
    border-color: var(--type-subject-border);
    color: var(--type-subject-fg);
}
#navbarSearchModal .search-type-chip[data-type="idea"].is-active,
.filter-dropdown .search-type-chip[data-type="idea"].is-active,
.search-page-wrap .search-type-chip[data-type="idea"].is-active,
.search-box-wrapper:has(.search-box:focus-within) .search-type-filters .search-type-chip[data-type="idea"].is-active {
    background: var(--type-idea-bg);
    border-color: var(--type-idea-border);
    color: var(--type-idea-fg);
}
#navbarSearchModal .search-type-chip[data-type="project"].is-active,
.filter-dropdown .search-type-chip[data-type="project"].is-active,
.search-page-wrap .search-type-chip[data-type="project"].is-active,
.search-box-wrapper:has(.search-box:focus-within) .search-type-filters .search-type-chip[data-type="project"].is-active {
    background: var(--type-project-bg);
    border-color: var(--type-project-border);
    color: var(--type-project-fg);
}
#navbarSearchModal .search-type-chip[data-type="deliverable"].is-active,
.filter-dropdown .search-type-chip[data-type="deliverable"].is-active,
.search-page-wrap .search-type-chip[data-type="deliverable"].is-active,
.search-box-wrapper:has(.search-box:focus-within) .search-type-filters .search-type-chip[data-type="deliverable"].is-active {
    background: var(--type-deliverable-bg);
    border-color: var(--type-deliverable-border);
    color: var(--type-deliverable-fg);
}
#navbarSearchModal .search-type-chip[data-type="task"].is-active,
.filter-dropdown .search-type-chip[data-type="task"].is-active,
.search-page-wrap .search-type-chip[data-type="task"].is-active,
.search-box-wrapper:has(.search-box:focus-within) .search-type-filters .search-type-chip[data-type="task"].is-active {
    background: var(--type-task-bg);
    border-color: var(--type-task-border);
    color: var(--type-task-fg);
}
#navbarSearchModal .search-type-chip[data-type="note"].is-active,
.filter-dropdown .search-type-chip[data-type="note"].is-active,
.search-page-wrap .search-type-chip[data-type="note"].is-active,
.search-box-wrapper:has(.search-box:focus-within) .search-type-filters .search-type-chip[data-type="note"].is-active {
    background: var(--meerkat-surface-subtle);
    border-color: var(--meerkat-border);
    color: var(--meerkat-muted);
}
.search-type-chip.is-active {
    text-decoration: none;
}

.search-box-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--meerkat-muted);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 0.8rem;
    border-radius: 50%;
    line-height: 1;
}

.search-box-clear:hover {
    background: var(--meerkat-surface-subtle);
    color: var(--meerkat-ink);
}

/* ----- Instant search results dropdown ----- */
.search-results-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: auto;
    width: max(50vw, 100%);
    min-width: 50vw;
    max-width: min(90vw, calc(100vw - 1.5rem));
    background: var(--meerkat-surface-raised);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(var(--meerkat-black-rgb), 0.18), 0 0 0 1px rgba(var(--meerkat-black-rgb), 0.06);
    z-index: var(--meerkat-z-popover, 1100);
    overflow: hidden;
    max-height: 440px;
    overflow-y: auto;
}

.search-results-list {
    padding: 6px 0;
}

.search-result-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--meerkat-ink);
    transition: background 0.1s;
    cursor: pointer;
}

.search-result-item:hover,
.search-result-item.is-active {
    background: var(--meerkat-surface-subtle);
    text-decoration: none;
    color: var(--meerkat-ink);
}

.search-result-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.search-result-icon.type-domain    { background: var(--type-domain-bg); color: var(--type-domain-fg); }
.search-result-icon.type-subject   { background: var(--type-subject-bg); color: var(--type-subject-fg); }
.search-result-icon.type-idea      { background: var(--type-idea-bg); color: var(--type-idea-fg); }
.search-result-icon.type-project   { background: var(--type-project-bg); color: var(--type-project-fg); }
.search-result-icon.type-deliverable { background: var(--type-deliverable-bg); color: var(--type-deliverable-fg); }
.search-result-icon.type-task      { background: var(--type-task-bg); color: var(--type-task-fg); }
.search-result-icon.type-note      { background: var(--meerkat-surface-subtle); color: var(--meerkat-muted); }

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

.search-result-title {
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-breadcrumb {
    font-size: 0.72rem;
    color: var(--meerkat-muted-2);
    line-height: 1.35;
    margin-top: 2px;
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-bc-sep {
    margin: 0 0.2em;
    color: var(--meerkat-disabled);
    font-weight: 500;
}

.search-bc-part {
    color: var(--meerkat-muted);
}

.search-result-meta {
    font-size: 0.78rem;
    color: var(--meerkat-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-date {
    font-size: 0.78rem;
    color: var(--meerkat-muted-2);
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
}

.search-see-all {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    font-size: 0.85rem;
    color: var(--meerkat-muted);
    text-decoration: none;
    border-top: 1px solid var(--meerkat-border);
    transition: background 0.1s;
}

.search-see-all:hover {
    background: var(--meerkat-surface-subtle);
    color: var(--meerkat-ink);
    text-decoration: none;
}

.search-no-results {
    padding: 20px 16px;
    text-align: center;
    color: var(--meerkat-muted-2);
    font-size: 0.85rem;
}

.search-full-breadcrumb {
    line-height: 1.45;
    word-break: break-word;
}

/* ----- Global filter ----- */
.global-filter-wrapper {
    position: relative;
}

@media (max-width: 991.98px) {
    .global-filter-wrapper .filter-badge-label {
        display: none;
    }
    .global-filter-wrapper .filter-badge,
    .global-filter-wrapper .filter-toggle-btn {
        max-width: none;
    }

    /* Icon-only filter matches navbar search control sizing */
    .meerkat-navbar .global-filter-wrapper .btn.filter-toggle-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 31px;
        height: 31px;
        padding: 0;
        line-height: 1;
    }

    .filter-dropdown:not(.d-none) {
        width: min(calc(100vw - 1.5rem), 28rem);
    }
}

/* Custom dormant styling when not using Bootstrap outline buttons */
.filter-toggle-btn:not(.btn) {
    background: rgba(var(--meerkat-plan-surface-rgb), 0.1);
    border: 1px solid rgba(var(--meerkat-plan-surface-rgb), 0.15);
    color: rgba(var(--meerkat-plan-surface-rgb), 0.6);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.filter-toggle-btn:not(.btn):hover {
    background: rgba(var(--meerkat-plan-surface-rgb), 0.18);
    color: var(--meerkat-surface-raised);
}

.filter-badge-group {
    background: rgba(var(--meerkat-primary-rgb), 0.15);
    border: 1px solid rgba(var(--meerkat-primary-rgb), 0.3);
    border-radius: 6px;
    padding: 2px 4px 2px 8px;
}

.filter-badge-group--dormant {
    background: transparent;
    border: none;
    padding: 0;
}

.filter-open-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    font: inherit;
    max-width: 200px;
    text-align: left;
    color: inherit;
}

.filter-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--meerkat-guide-accent);
    font-size: 0.78rem;
    white-space: nowrap;
    max-width: 200px;
}

.filter-badge-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-badge-sep {
    opacity: 0.5;
}

.filter-clear-btn {
    background: none;
    border: none;
    color: rgba(var(--meerkat-plan-surface-rgb), 0.5);
    cursor: pointer;
    padding: 0 2px;
    font-size: 0.8rem;
    line-height: 1;
    border-radius: 3px;
}

.filter-clear-btn:hover {
    color: var(--meerkat-surface-raised);
    background: rgba(var(--meerkat-plan-surface-rgb), 0.1);
}

.filter-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    background: var(--meerkat-surface-raised);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(var(--meerkat-black-rgb), 0.18), 0 0 0 1px rgba(var(--meerkat-black-rgb), 0.06);
    z-index: var(--meerkat-z-popover, 1100);
    max-height: 80vh;
    overflow-y: auto;
}

.global-filter-backdrop {
    z-index: var(--meerkat-z-overlay-backdrop, 1290);
}

.filter-dropdown:not(.d-none) {
    position: fixed;
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(calc(100vw - 1.5rem), 32rem);
    margin: 0;
    z-index: var(--meerkat-z-overlay, 1300);
    max-height: min(85vh, 680px);
}

.filter-dropdown-header {
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--meerkat-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-dropdown-body {
    padding: 12px 16px;
}

.filter-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--meerkat-muted);
    margin-bottom: 4px;
    display: block;
}

.filter-dropdown-footer {
    padding: 8px 16px 12px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--meerkat-border);
}

/* ----- Node search inside filter ----- */
.filter-node-search-wrap {
    position: relative;
}

.filter-node-results {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: var(--meerkat-surface-raised);
    border: 1px solid var(--meerkat-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(var(--meerkat-black-rgb), 0.12);
    max-height: 200px;
    overflow-y: auto;
    z-index: var(--meerkat-z-overlay-priority, 1310);
}

.filter-node-result-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--meerkat-ink);
    transition: background 0.1s;
}

.filter-node-result-item:hover {
    background: var(--meerkat-surface-subtle);
}

.filter-node-result-type {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}

.filter-node-result-type.type-domain      { background: var(--type-domain-bg); color: var(--type-domain-fg); }
.filter-node-result-type.type-subject     { background: var(--type-subject-bg); color: var(--type-subject-fg); }
.filter-node-result-type.type-idea        { background: var(--type-idea-bg); color: var(--type-idea-fg); }
.filter-node-result-type.type-project     { background: var(--type-project-bg); color: var(--type-project-fg); }
.filter-node-result-type.type-deliverable { background: var(--type-deliverable-bg); color: var(--type-deliverable-fg); }
.filter-node-result-type.type-task        { background: var(--type-task-bg); color: var(--type-task-fg); }
.filter-node-result-type.type-note        { background: var(--meerkat-surface-subtle); color: var(--meerkat-muted); }

.filter-node-result-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.filter-node-result-empty {
    padding: 12px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--meerkat-muted-2);
}

.filter-node-selected {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--meerkat-surface-subtle);
    border: 1px solid var(--meerkat-border);
    border-radius: 6px;
    padding: 5px 8px 5px 10px;
    margin-top: 6px;
    font-size: 0.82rem;
}

.filter-node-selected-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--meerkat-ink);
    font-weight: 500;
}

.filter-node-selected-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--meerkat-muted);
    padding: 0 2px;
    font-size: 0.9rem;
    line-height: 1;
    border-radius: 3px;
    flex-shrink: 0;
}

.filter-node-selected-clear:hover {
    color: var(--meerkat-danger);
    background: rgba(var(--meerkat-danger-rgb), 0.08);
}

/* ----- Completion radio (Complete / Active / All) ----- */
.filter-completion-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.filter-completion-radio {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--meerkat-ink-2);
    cursor: pointer;
    white-space: nowrap;
}

.filter-completion-radio input[type="radio"] {
    accent-color: var(--meerkat-primary);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

/* ----- Active context banner ----- */
.active-context-banner {
    background: linear-gradient(90deg, var(--meerkat-plan-cream) 0%, var(--meerkat-primary-tint) 100%);
    border-bottom: 1px solid var(--meerkat-plan-amber-300);
    padding: 6px 0;
    font-size: 0.82rem;
    position: sticky;
    top: var(--meerkat-navbar-height, 56px);
    z-index: calc(var(--meerkat-z-sidebar, 1030) - 10);
}

.active-context-text {
    color: var(--meerkat-primary-active);
}

.active-context-type {
    font-weight: 400;
    opacity: 0.7;
    font-size: 0.78rem;
}

.active-context-clear {
    color: var(--meerkat-primary-active);
    font-size: 0.78rem;
    text-decoration: none;
    padding: 2px 8px;
}

.active-context-clear:hover {
    color: var(--meerkat-primary-deep);
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .active-context-banner .container-fluid > .d-flex {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.35rem;
    }
    .active-context-banner .active-context-clear {
        margin-left: auto;
        padding: 2px 4px;
    }
}

/* ----- Node type chips (search results page) ----- */
.node-type-chip {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.node-type-chip.node-type-domain      { background: var(--type-domain-bg); color: var(--type-domain-fg); }
.node-type-chip.node-type-subject     { background: var(--type-subject-bg); color: var(--type-subject-fg); }
.node-type-chip.node-type-idea        { background: var(--type-idea-bg); color: var(--type-idea-fg); }
.node-type-chip.node-type-project     { background: var(--type-project-bg); color: var(--type-project-fg); }
.node-type-chip.node-type-deliverable { background: var(--type-deliverable-bg); color: var(--type-deliverable-fg); }
.node-type-chip.node-type-task        { background: var(--type-task-bg); color: var(--type-task-fg); }
.node-type-chip.node-type-note        { background: var(--meerkat-surface-subtle); color: var(--meerkat-muted); }

/* ----- Keyboard shortcut hint ----- */
@media (min-width: 768px) {
    .search-box-input {
        padding-right: 36px;
    }
}