/* =============================================================
   Global Search — Command Palette Dialog
   These rules must be global (not scoped) because MudDialog
   renders inside the MudDialogProvider portal, outside the
   SearchDialog component's DOM scope.
   ============================================================= */

/* Remove default MudDialog content padding for a flush layout */
.sd-panel .mud-dialog-content {
    padding:  0 !important;
    overflow: hidden;
}

.sd-panel {
    border-radius: 12px !important;
    overflow:      hidden;
}

/*  Input row  */

.sd-input-row {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       14px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.sd-search-icon {
    color:       var(--mud-palette-text-secondary) !important;
    font-size:   22px !important;
    flex-shrink: 0;
}

.sd-input {
    flex:        1;
    border:      none;
    outline:     none;
    background:  transparent;
    color:       var(--mud-palette-text-primary);
    font-size:   16px;
    font-family: inherit;
    min-width:   0;
}

.sd-input::placeholder {
    color: var(--mud-palette-text-secondary);
}

.sd-esc-btn {
    flex-shrink:   0;
    padding:       3px 8px;
    font-size:     11px;
    font-family:   ui-monospace, monospace;
    color:         var(--mud-palette-text-secondary);
    background:    var(--mud-palette-background-grey);
    border:        1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    cursor:        pointer;
    transition:    background 0.1s;
}

.sd-esc-btn:hover {
    background: var(--mud-palette-action-default-hover);
}

/*  Results list  */

.sd-results {
    max-height: 420px;
    overflow-y: auto;
    padding:    8px 0;
}

.sd-group-label {
    padding:         8px 16px 4px;
    font-size:       11px;
    font-weight:     700;
    letter-spacing:  0.08em;
    text-transform:  uppercase;
    color:           var(--mud-palette-text-secondary);
}

.sd-result {
    display:    flex;
    align-items: center;
    gap:        10px;
    padding:    9px 16px;
    cursor:     pointer;
    transition: background 0.1s ease;
}

.sd-result:hover,
.sd-result-active {
    background: var(--mud-palette-action-default-hover);
}

.sd-result-icon-wrap {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           32px;
    height:          32px;
    border-radius:   8px;
    background:      var(--mud-palette-background-grey);
    flex-shrink:     0;
    color:           var(--mud-palette-text-secondary);
}

.sd-result-active .sd-result-icon-wrap {
    background: var(--mud-palette-primary-lighten);
    color:      var(--mud-palette-primary);
}

.sd-result-body {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    gap:             2px;
    min-width:       0;
}

.sd-result-title {
    font-size:     14px;
    font-weight:   700;
    color:         var(--mud-palette-text-primary);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.sd-result-desc {
    font-size:     12px;
    color:         var(--mud-palette-text-secondary);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.sd-result-badge {
    flex-shrink: 0;
    font-size:   10px !important;
    height:      20px !important;
}

.sd-result-arrow {
    color:      var(--mud-palette-text-secondary) !important;
    flex-shrink: 0;
    opacity:    0;
    transition: opacity 0.1s;
}

.sd-result:hover      .sd-result-arrow,
.sd-result-active .sd-result-arrow {
    opacity: 1;
}

/*  Empty state  */

.sd-empty {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         40px 16px;
    text-align:      center;
}

/*  Keyboard hints footer  */

.sd-footer {
    display:       flex;
    align-items:   center;
    gap:           16px;
    padding:       8px 16px;
    border-top:    1px solid var(--mud-palette-lines-default);
    background:    var(--mud-palette-background-grey);
}

.sd-hint {
    font-size: 11px;
    color:     var(--mud-palette-text-secondary);
}

.sd-hint kbd {
    display:       inline-block;
    padding:       1px 5px;
    font-size:     10px;
    font-family:   ui-monospace, monospace;
    border:        1px solid var(--mud-palette-lines-default);
    border-radius: 3px;
    background:    var(--mud-palette-surface);
    margin-right:  2px;
}

/* Push the result count to the right */
.sd-hint-count {
    margin-left: auto;
}