/* Search Everywhere: app-bar trigger + Ctrl+K palette dialog.
   Colours come from the MudBlazor palette variables so light/dark themes follow automatically. */

/* ── App-bar trigger ─────────────────────────────────────────────────────── */
.se-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: clamp(220px, 32vw, 500px);
    height: 32px;
    padding: 0 10px 0 14px;
    border: none;
    border-radius: 999px;
    background: #fff;
    color: #9e9e9e;
    font: inherit;
    font-size: 0.95rem;
    cursor: text;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: box-shadow 0.15s ease;
}

.se-trigger:hover,
.se-trigger:focus-visible {
    outline: none;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18), 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.se-trigger-text {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.se-trigger-kbd {
    font-size: 0.72rem;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid #ddd;
    color: #888;
    background: #f7f7f7;
    font-family: inherit;
}

.se-trigger .mud-icon-root {
    color: #616161;
}

@media (max-width: 959.98px) {
    .se-trigger {
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
        background: transparent;
        box-shadow: none;
        cursor: pointer;
    }

    .se-trigger .mud-icon-root {
        color: inherit;
    }

    .se-trigger-text,
    .se-trigger-kbd {
        display: none;
    }
}

/* ── Dialog shell ────────────────────────────────────────────────────────── */
.se-dialog {
    width: 100%;
    max-width: 860px;
    margin-top: 8vh;
    border-radius: 12px !important;
    overflow: hidden;
}

.se-dialog .mud-dialog-content {
    padding: 0 !important;
    margin: 0 !important;
}

.mud-dialog-fullscreen.se-dialog {
    margin-top: 0;
    border-radius: 0 !important;
    max-width: none;
}

.se-root {
    display: flex;
    flex-direction: column;
    max-height: min(640px, 80vh);
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
}

.mud-dialog-fullscreen .se-root {
    max-height: 100vh;
    height: 100vh;
}

/* ── Input ───────────────────────────────────────────────────────────────── */
.se-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 10px;
}

.se-input-icon {
    color: var(--mud-palette-text-secondary);
}

.se-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 1.1rem;
    padding: 4px 0;
}

.se-input::placeholder {
    color: var(--mud-palette-text-disabled);
}

.se-clear {
    display: inline-flex;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
}

.se-clear:hover {
    background: var(--mud-palette-action-default-hover);
}

.se-kbd {
    display: inline-block;
    min-width: 1.5em;
    padding: 2px 6px;
    margin: 0 2px;
    border: 1px solid var(--mud-palette-lines-default);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.72rem;
    line-height: 1.3;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
}

.se-esc {
    cursor: pointer;
}

.se-progress {
    height: 4px;
}

/* ── Chips ───────────────────────────────────────────────────────────────── */
/* The input, chips and footer rows keep their height; only the result list scrolls.
   Without flex-shrink: 0 a row with overflow set collapses inside the max-height column. */
.se-input-row,
.se-progress,
.se-chips,
.se-footer {
    flex-shrink: 0;
}

.se-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 4px 16px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.se-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.82rem;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.se-chip .mud-icon-root {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
}

.se-chip:hover {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.se-chip:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.se-chip-active,
.se-chip-active:hover {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* Phones: one scrollable row instead of several wrapped ones. */
@media (max-width: 599.98px) {
    .se-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .se-chips::-webkit-scrollbar {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .se-chip {
        transition: none;
    }
}

/* ── Results ─────────────────────────────────────────────────────────────── */
.se-results {
    flex: 1 1 auto;
    min-height: 0;  /* shrink before the footer does on short screens */
    overflow-y: auto;
    padding: 4px 8px 8px;
}

.se-empty {
    padding: 24px 12px;
    color: var(--mud-palette-text-secondary);
    text-align: center;
    font-size: 0.9rem;
}

.se-group-header {
    padding: 10px 10px 4px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.se-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--mud-palette-text-primary) !important;
    text-decoration: none !important;
    cursor: pointer;
    min-width: 0;
}

.se-row-selected {
    background: var(--mud-palette-action-default-hover);
}

.se-row-icon {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
}

.se-row-selected .se-row-icon {
    color: var(--mud-palette-primary);
}

.se-row-name {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.se-row-sub {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mud-palette-text-secondary);
    font-size: 0.88rem;
}

.se-row-meta {
    flex: 1 0 auto;
    white-space: nowrap;
    color: var(--mud-palette-text-disabled);
    font-size: 0.8rem;
}

.se-row-enter {
    flex: 0 0 auto;
    visibility: hidden;
    padding: 0 6px;
    border-radius: 4px;
    color: #fff;
    background: var(--mud-palette-primary);
    font-size: 0.85rem;
}

.se-row-selected .se-row-enter {
    visibility: visible;
}

.se-row-obsolete .se-row-name,
.se-row-obsolete .se-row-sub {
    color: var(--mud-palette-text-disabled);
    text-decoration: line-through;
}

.se-row mark {
    background: transparent;
    color: var(--mud-palette-primary);
    font-weight: 700;
    padding: 0;
}

/* ── Hover card (MudTooltip) ─────────────────────────────────────────────── */
/* Wrapper around name + subtitle inside the row: keeps the ellipsis working. */
.se-tip-root {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: 0 1 auto;
    min-width: 0;
}

/* The popover renders outside the dialog, so these rules are not nested under .se-root.
   MudBlazor's .mud-tooltip-default (dark grey, white text) has the same specificity and loads
   later, so the surface colours are forced here. */
.mud-tooltip.se-tip,
.mud-tooltip.mud-tooltip-default.se-tip {
    padding: 0 !important;
    max-width: 340px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    pointer-events: none;
}

/* Item / tool picture, only when one exists. Contained, not cropped: parts must stay recognisable. */
.se-tip-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    padding: 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px 10px 0 0;
    background: var(--mud-palette-background-gray, #f5f5f5);
}

.se-tip-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.se-tip-card {
    padding: 14px 16px 14px;
}

.se-tip-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.se-tip-icon {
    flex: 0 0 auto;
    box-sizing: content-box;
    padding: 5px;
    border-radius: 8px;
    color: var(--mud-palette-primary) !important;
    background: rgba(var(--mud-palette-primary-rgb), 0.1);
}

.se-tip-heading {
    min-width: 0;
    padding-top: 1px;
}

.se-tip-title {
    color: var(--mud-palette-text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.se-tip-kind {
    margin-top: 2px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
}

.se-tip-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: baseline;
    gap: 6px 16px;
    margin: 0;
}

/* Bootstrap makes dt bold; labels stay quiet so the values carry the card. */
.se-tip-facts dt {
    margin: 0;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.se-tip-facts dd {
    margin: 0;
    color: var(--mud-palette-text-primary);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* Status pill: the one emphasised thing in the card (stock, IN/OUT). */
.se-tip-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 1px 9px 1px 7px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.5;
}

.se-tip-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.se-tip-pill-good {
    color: var(--mud-palette-success-darken, #2e7d32);
    background: rgba(var(--mud-palette-success-rgb, 46, 125, 50), 0.14);
}

.se-tip-pill-warn {
    color: var(--mud-palette-warning-darken, #b26a00);
    background: rgba(var(--mud-palette-warning-rgb, 255, 152, 0), 0.16);
}

.se-tip-pill-bad {
    color: var(--mud-palette-error-darken, #c62828);
    background: rgba(var(--mud-palette-error-rgb, 244, 67, 54), 0.13);
}

.se-tip-pill-muted {
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-default-hover);
}

.se-tip-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.se-tip-tag {
    padding: 0 8px;
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.35);
    border-radius: 999px;
    color: var(--mud-palette-primary);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.se-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
    white-space: nowrap;
}

.se-footer-spacer {
    flex: 1;
}

.se-partial {
    color: var(--mud-palette-warning);
}

.se-took {
    color: var(--mud-palette-text-disabled);
}

@media (max-width: 599.98px) {
    .se-hide-mobile,
    .se-row-meta {
        display: none;
    }

    .se-row {
        padding: 10px;
    }
}