/* =============================================================================
   Phase 5 — Command palette modal

   dbc.Modal renders Bootstrap's standard modal markup. We override the
   chrome so it matches the Bloomberg amber palette and stays out of the
   way (centered, dimmed backdrop, compact list).

   z-index ladder: backdrop 1040, modal 1050 (Bootstrap default). The
   fundamentals/flow overlays (z-index 20) sit well below so the palette
   naturally wins the stack.

   The palette is `position: fixed` and `top: 12vh` so it floats above
   the header tape but never feels like an interstitial screen.
   ========================================================================== */

/* Stay hidden until Bootstrap adds `.show` — prevents a flash on first
   paint when Dash hydrates before the open-store callback runs. */
#command-palette.modal:not(.show) {
    display: none !important;
    pointer-events: none;
}

body:not(.modal-open) .sfa-palette-backdrop,
body:not(.modal-open) .modal-backdrop {
    display: none !important;
}

.sfa-palette-modal .modal-dialog {
    /* Override Bootstrap's vertical centering so the palette sits a
       comfortable 12vh from the top — feels less like a dialog and more
       like a Spotlight/Superhuman overlay. */
    align-items: flex-start !important;
    min-height: 0 !important;
    margin-top: 12vh;
}

.sfa-palette-modal .modal-content,
.sfa-palette-content {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
    color: var(--text-primary);
    overflow: hidden;
}

.sfa-palette-backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}

.sfa-palette-body {
    display: flex;
    flex-direction: column;
    padding: 0;
    min-height: 0;
}

.sfa-palette-input {
    /* Bigger, cleaner than the standard bbg-input. Full-width so the
       search bar reads like the primary control of the palette. */
    width: 100%;
    height: 48px !important;
    font-size: 16px !important;
    font-family: var(--font-sans) !important;
    background: var(--bg-secondary) !important;
    border: none !important;
    border-bottom: 1px solid var(--border-primary) !important;
    border-radius: 0 !important;
    padding: 0 18px !important;
    color: var(--text-primary) !important;
    letter-spacing: 0.3px;
    box-shadow: none !important;
}
.sfa-palette-input::placeholder {
    color: var(--text-tertiary);
    font-style: italic;
}
.sfa-palette-input:focus-visible {
    outline: none !important;
    border-bottom-color: var(--accent) !important;
}

.sfa-palette-list {
    max-height: 50vh;
    overflow-y: auto;
    padding: 6px 0;
}

.sfa-palette-group-header {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--text-tertiary);
    padding: 10px 18px 4px;
}

.sfa-palette-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 18px;
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: background 60ms ease, border-color 60ms ease;
    /* Avoid long hinth wrapping breaking the row rhythm. */
    min-width: 0;
}
.sfa-palette-row:hover {
    background: var(--bg-hover);
}
.sfa-palette-row.active {
    background: var(--bg-hover);
    border-left-color: var(--accent);
}
.sfa-palette-row:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.sfa-palette-row-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}

.sfa-palette-row-label {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sfa-palette-row-hint {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sfa-palette-shortcut {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.sfa-palette-kbd-key {
    display: inline-block;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-bottom-width: 2px;
    border-radius: 3px;
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1;
    min-width: 16px;
    text-align: center;
}

.sfa-palette-kbd-plus {
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 10px;
    margin: 0 1px;
}

.sfa-palette-empty {
    padding: 32px 18px;
    text-align: center;
    color: var(--text-tertiary);
    font-family: var(--font-sans);
    font-size: 12px;
    font-style: italic;
}

.sfa-palette-foot {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 18px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-primary);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-tertiary);
}

.sfa-palette-foot-key {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Help button in the header uses the same chrome as the theme toggle.
   Give it a subtle hover/active distinction so it doesn't look identical
   to the theme button on first glance. */
button#help-shortcuts-btn:hover {
    color: var(--accent) !important;
}

/* On smaller viewports, the palette takes most of the screen height so
   the list scrolls cleanly. */
@media (max-width: 760px) {
    .sfa-palette-list { max-height: 60vh; }
    .sfa-palette-modal .modal-dialog { margin-top: 4vh; }
}

/* Light theme overrides — keep the same rhythm but lighter. */
body.theme-light .sfa-palette-content {
    background: var(--bg-primary);
    border-color: var(--border-primary);
}
body.theme-light .sfa-palette-input {
    background: var(--bg-secondary);
}
body.theme-light .sfa-palette-row:hover,
body.theme-light .sfa-palette-row.active {
    background: var(--bg-hover);
}
body.theme-light .sfa-palette-kbd-key {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
    color: var(--text-secondary);
}