/* ============================================================
   CTRL+K COMMAND PALETTE — Design D "Glass Cohesion" (utilities.css:1, dialogs.css:1223)

   The palette is a MENU rendered in a dialog, so it borrows from two places rather than
   inventing a third language:

     - The DIALOG model (dialogs.css): paper = chrome panel, content = ground, and the
       bracketing chrome (search bar, footer) keeps the surface fill and is separated from
       the ground by --defex-rule. That is exactly how .mud-dialog-title and
       .mud-dialog-actions are treated for register modals.
     - The NAV ROW language (nav-menu.css:398-430, 576-590): --defex-radius-nav, a
       translucent fill, and a white inset hairline on hover so a row reads as a lens
       lifting off the pane. These rows ARE the nav menu's rows, just relocated, so they
       should not look like anything else.

   The panel rim, radius and shadow are NOT declared here — the general dialog-chrome rule
   (dialogs.css:1352) already reaches this dialog, and .defex-dialog-fullbleed supplies the
   clip. Restating them would be dead weight at best and a specificity fight at worst.

   Deliberately NO backdrop-filter, per the dialogs.css rationale: a dialog sits on
   MudBlazor's scrim, and blurring a near-flat colour just returns that colour.

   Light theme only, matching the tokens it consumes. A dialog renders outside
   .main-container, so MainLayout's defex-theme-dark marker never reaches it and there is
   no selector available to scope a dark variant — same constraint documented in
   dialogs.css. Text and icon colours stay on --mud-palette-* so they follow the theme.
   ============================================================ */

.defex-palette-root {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* The keydown handler lives here, so it must never show a focus ring of its own. */
.defex-palette-root:focus,
.defex-palette-root:focus-visible {
    outline: none;
}

/* CHROME — bracketing the ground, same treatment as .mud-dialog-title. */
.defex-palette-search {
    padding: 6px 16px 2px 16px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--defex-rule);
}

.defex-palette-search .mud-input-root {
    font-size: 1.15rem;
}

/* THE GROUND. Square-cornered on purpose: .defex-dialog-fullbleed clips it to the panel
   radius, so rounding it here would leave a hairline of paper at each corner. */
.defex-palette-results {
    max-height: 46vh;
    overflow-y: auto;
    padding: 8px;
    background: var(--defex-page-ground);
}

.defex-palette-heading {
    padding: 4px 10px 6px 10px;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    font-weight: 600;
}

/* ROWS — the nav menu's rows, relocated. */
.defex-palette-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    margin: 2px 0;
    border: 1px solid transparent;
    border-radius: var(--defex-radius-nav);
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
}

/* Rows are tabindex=-1 click targets, not focus stops — the search field keeps focus. */
.defex-palette-row:focus {
    outline: none;
}

/* The inset hairline is the nav menu's hover recipe: a glass edge, so the row reads as a
   lens lifting off the pane rather than a grey smear across it. */
.defex-palette-row:hover {
    background: var(--defex-glass-panel);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.50);
}

/* The keyboard cursor is the nav menu's ACTIVE row: a card on the ground. It has to beat
   :hover unconditionally — the mouse often rests over a different row than the one the
   arrow keys are on, and the highlight must follow the keyboard, not the cursor. */
.defex-palette-row--active,
.defex-palette-row--active:hover {
    background: var(--defex-card-bg);
    border-color: var(--defex-card-edge);
    box-shadow: 0 2px 6px rgba(15, 23, 43, 0.06);
}

.defex-palette-row-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.defex-palette-row-section {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
}

.defex-palette-empty {
    padding: 18px 10px;
    color: var(--mud-palette-text-secondary);
}

.defex-palette-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
}

/* NavigatorIcon hard-codes a 50px container with !important, which is a page-scale entity tile —
   far too big for a menu row. The wrapper scales the whole dot down rather than fighting those
   declarations, so the drawer's colour coding survives at row scale. */
.defex-palette-row-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

.defex-palette-row-dot .navigator-icon-container {
    transform: scale(0.4);
    transform-origin: center;
}

/* CHROME — same treatment as .mud-dialog-actions. */
.defex-palette-footer {
    display: flex;
    gap: 16px;
    padding: 8px 16px;
    background-color: var(--mud-palette-surface);
    border-top: 1px solid var(--defex-rule);
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
}

.defex-palette-kbd {
    display: inline-block;
    padding: 1px 5px;
    margin-right: 4px;
    border: 1px solid var(--defex-ghost-edge);
    border-radius: var(--defex-radius-nav);
    background-color: var(--defex-inner-bg);
    font-family: inherit;
    font-size: 0.7rem;
}