/* ============================================================================
   Klar - search blocks (Components/Klar/Search): the result row, the scope
   chips, the picker field and dialog, the explorer omnibox.

   The row and the result list reuse the command palette's structure
   (.cp-item, .cp-group, .cp-results in section 15 of
   assetmanager.frontend.styles.css), so the palette, the pickers and the
   omnibox show the same row. This file adds what the engine's rows carry
   beyond the palette's (what, state, where, why matched, hints) and the
   fields. Theme tokens only (--mud-palette-*, --klar-*): every theme, light
   and dark.
   ========================================================================= */

/* == the row ============================================================== */

.klar-search-row .cp-item-text {
    gap: .0625rem;
}

.klar-search-line {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.klar-search-line > * {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* the name is what the row is about: it never gives way to what, state or where */
.klar-search-line > .cp-item-title {
    flex: 0 0 auto;
    max-width: 100%;
}

/* under a field the list is as narrow as the field: the parts of a row wrap instead of cutting the serial */
.klar-search-popup .klar-search-line {
    flex-wrap: wrap;
    row-gap: .125rem;
}

/* the number of a product type or property after its name ("#12") */
.klar-search-number {
    flex: none;
    font-size: .8125rem;
}

.klar-search-what {
    flex: 0 1 auto;
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
}

/* "Kanalplatine 3 / 10": what the place holds of the type that is placed there (R3-P3-93) */
.klar-search-occupancy {
    flex: none;
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
}

.klar-search-state.klar-chip {
    flex: none;
    height: 1.25rem;
    font-size: .6875rem;
}

.klar-search-where,
.klar-search-why,
.klar-search-description,
.klar-search-unavailable {
    flex: 0 1 auto;
}

/* "Mac-ID 8C:1F:64:B8:80:23" - the value in mono, the matched part marked */
.klar-search-why {
    color: var(--mud-palette-text-secondary);
}

.klar-search-why .klar-mono {
    margin-inline-start: .25rem;
    color: var(--mud-palette-text-primary);
}

.klar-search-where + .klar-search-why::before {
    content: "·";
    margin-inline-end: .5rem;
    color: var(--mud-palette-text-disabled);
}

.klar-search-unavailable {
    color: var(--mud-palette-warning-darken, var(--mud-palette-text-secondary));
    font-weight: 600;
}

.klar-search-shortcut,
.klar-search-hint {
    flex: none;
}

.klar-search-hint {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
    white-space: nowrap;
}

/* a row the caller does not accept: readable, not clickable-looking */
.klar-search-row.klar-search-row-unavailable {
    cursor: not-allowed;
}

/* "Open 37 serials as list" is an action on the query, not an object */
.klar-search-row.klar-search-row-action .cp-item-title {
    color: var(--klar-primary-ink);
    font-weight: 600;
}

.klar-search-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

/* == scope chips =========================================================== */

.klar-search-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.klar-search-chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    min-height: 32px;
    padding: 0 .75rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 999px;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: 500 .8125rem/1 var(--klar-font-ui);
    cursor: pointer;
    transition: background-color var(--klar-micro) ease, border-color var(--klar-micro) ease;
}

.klar-search-chip:hover {
    border-color: var(--klar-primary-ink);
}

.klar-search-chip:focus-visible {
    outline: 2px solid var(--klar-accent);
    outline-offset: 2px;
}

.klar-search-chip.klar-search-chip-on {
    border-color: var(--klar-primary-ink);
    background-color: rgba(var(--mud-palette-primary-rgb), .12);
    color: var(--klar-primary-ink);
    font-weight: 650;
}

.klar-search-chip .mud-icon-root {
    font-size: 1rem;
}

/* touch devices: the chips replace the key hints, and need a finger's size */
@media (hover: none) and (pointer: coarse) {
    .klar-search-chip {
        min-height: 44px;
        padding: 0 1rem;
    }
}

/* the palette: the chip row below the input (touch) and "Include archived" in the footer (keyboard) */
.cp-scopes {
    padding: .5rem 1rem .625rem;
    border-bottom: 1px solid var(--klar-hairline);
}

.cp-footer .cp-footer-archived {
    margin-inline-start: auto;
}

.cp-footer .cp-footer-archived .klar-search-chip {
    min-height: 26px;
    padding: 0 .625rem;
    font-size: .75rem;
}

/* == the field (picker, omnibox) ========================================== */

.klar-picker {
    min-width: 0;
}

.klar-omnibox {
    position: relative;
    min-width: 0;
}

.klar-search-label {
    display: block;
    margin-bottom: .375rem;
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
    font-weight: 600;
}

.klar-search-field {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: 0 .375rem 0 .75rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--klar-radius-control);
    background-color: var(--mud-palette-surface);
    transition: border-color var(--klar-micro) ease, box-shadow var(--klar-micro) ease;
}

.klar-search-field:hover {
    border-color: var(--klar-primary-ink);
}

/* the same ring as a focused MudBlazor field (section 7) */
.klar-search-field:focus-within {
    border-color: var(--klar-primary-ink);
    box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb), .18);
}

.klar-search-field.klar-search-field-disabled {
    opacity: .6;
    pointer-events: none;
}

.klar-search-field-icon {
    flex: none;
    color: var(--mud-palette-text-secondary);
}

.klar-search-input {
    flex: 1;
    min-width: 0;
    height: 42px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: 400 .9375rem/1.4 var(--klar-font-ui);
}

.klar-search-input.klar-mono {
    font-family: var(--klar-font-mono);
    font-size: .9375rem;
}

.klar-search-input::placeholder {
    color: var(--mud-palette-text-secondary);
    font-family: var(--klar-font-ui);
    opacity: 1;
}

.klar-search-spinner,
.klar-search-clear {
    flex: none;
}

.klar-search-helper {
    margin-top: .25rem;
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
}

/* the list under a field: over the page, as wide as the field */
.klar-search-popup {
    position: absolute;
    z-index: calc(var(--mud-zindex-popover, 1200) + 1);
    inset-inline: 0;
    top: calc(100% + 4px);
    display: flex;
    flex-direction: column;
    max-height: min(440px, 60vh);
    border: 1px solid var(--klar-hairline);
    border-radius: var(--klar-radius-card);
    background-color: var(--mud-palette-surface);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .08);
    overflow: hidden;
}

/* the field and its list; label and helper stay outside, so the list starts right below the field */
.klar-search-anchor {
    position: relative;
}

/* == omnibox =============================================================== */

.klar-omnibox-field {
    min-height: 48px;
}

.klar-omnibox-field .klar-search-input {
    height: 46px;
    font-size: 1rem;
}

.klar-omnibox-enter {
    flex: none;
}

.klar-omnibox-actions {
    display: flex;
    flex-direction: column;
    padding: .25rem .5rem .5rem;
    border-top: 1px solid var(--klar-hairline);
}

.klar-omnibox-action {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .625rem;
    min-height: 40px;
    padding: .25rem .625rem;
    border: 0;
    border-radius: var(--klar-radius-control);
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: 500 .875rem/1.3 var(--klar-font-ui);
    text-align: start;
    cursor: pointer;
}

.klar-omnibox-action:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.klar-omnibox-action:focus-visible {
    outline: 2px solid var(--klar-accent);
    outline-offset: -2px;
}

.klar-omnibox-action-count {
    margin-inline-start: auto;
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
}

/* == picker dialog ========================================================= */

.mud-dialog.klar-picker-dialog .klar-picker-dialog-content {
    padding: 0;
}

.klar-picker-dialog-title {
    font-weight: 650;
}

.klar-picker-dialog-body {
    max-height: min(560px, calc(100dvh - 12rem));
}

/* == narrow widths ========================================================= */

@media (max-width: 599.98px) {
    .klar-search-what,
    .klar-search-hint {
        display: none;
    }

    .klar-omnibox-enter {
        display: none;
    }

    .klar-search-popup {
        max-height: 70vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .klar-search-chip,
    .klar-search-field {
        transition: none;
    }
}

/* == demo page (/dev/klar/search, Development only) ======================== */

.klar-search-demo {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 1100px;
}

.klar-search-demo-h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 650;
}

.klar-search-demo-h2 {
    margin: 0 0 .25rem;
    font-size: 1.125rem;
    font-weight: 650;
}

.klar-search-demo-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.klar-search-demo-select {
    max-width: 220px;
}

.klar-search-demo-card {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem;
}

.klar-search-demo-rows {
    max-width: 720px;
    border: 1px solid var(--klar-hairline);
    border-radius: var(--klar-radius-card);
}

.klar-search-demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    align-items: end;
}

.klar-search-demo-chosen {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
}

.klar-search-demo-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .25rem 1rem;
    margin: 0;
    font-size: .875rem;
}

.klar-search-demo-facts dt {
    color: var(--mud-palette-text-secondary);
}

.klar-search-demo-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}