/* ===================================================================
   Portal Spotlight — Ctrl+K command palette
   Standalone file: works in production (minified bundle) AND dev mode.
   Only additive selectors — zero impact on existing CSS.
   =================================================================== */

/* Prevent page scroll while spotlight is open */
body.portal-spotlight-open { overflow: hidden !important; }

/* ── Overlay backdrop ─────────────────────────────────────────────── */
#portal-spotlight-root { display: none; }

#portal-spotlight-root:not([hidden]) {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 9300 !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 68px 16px 60px !important;
    background: rgba(11, 45, 92, 0.58) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    overflow-y: auto !important;
    cursor: pointer !important;
}

/* ── Dialog panel ─────────────────────────────────────────────────── */
.portal-spotlight-dialog {
    cursor: auto !important;
    width: 100% !important;
    max-width: 640px !important;
    background: var(--rekaz-bg-card, #fff) !important;
    border: 1px solid var(--line, #e2e8f0) !important;
    border-radius: 20px !important;
    box-shadow: 0 32px 80px rgba(11, 45, 92, 0.30) !important;
    overflow: hidden !important;
    animation: spotlightPanelIn 0.2s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

@keyframes spotlightPanelIn {
    from { opacity: 0; transform: translateY(-14px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── Search input row ─────────────────────────────────────────────── */
.portal-spotlight-input-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid var(--line, #e2e8f0) !important;
}

.portal-spotlight-search-icon {
    flex-shrink: 0 !important;
    color: var(--muted, #64748b) !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

.portal-spotlight-input {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 1rem !important;
    color: var(--text, #0f172a) !important;
    font-family: inherit !important;
    min-width: 0 !important;
}

.portal-spotlight-input::placeholder {
    color: var(--muted, #94a3b8) !important;
}

.portal-spotlight-esc-badge {
    flex-shrink: 0 !important;
    font-size: 11px !important;
    font-family: inherit !important;
    background: var(--rekaz-bg-filter, #f1f5f9) !important;
    border: 1px solid var(--line, #e2e8f0) !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    color: var(--muted, #64748b) !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

/* ── Results list ─────────────────────────────────────────────────── */
.portal-spotlight-results {
    max-height: 460px !important;
    overflow-y: auto !important;
    padding: 6px 0 !important;
}

.portal-spotlight-group-label {
    padding: 8px 20px 3px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: var(--muted, #94a3b8) !important;
    user-select: none !important;
}

.portal-spotlight-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 9px 20px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    color: var(--text, #0f172a) !important;
    transition: background 0.1s !important;
    border: none !important;
    outline: none !important;
}

.portal-spotlight-item:hover,
.portal-spotlight-item[aria-selected="true"] {
    background: var(--rekaz-bg-filter, #f1f5f9) !important;
    color: var(--text, #0f172a) !important;
}

.portal-spotlight-item-icon {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    font-size: 17px !important;
    background: var(--rekaz-bg-filter, #f0f4ff) !important;
    border: 1px solid var(--line, #e8eef8) !important;
}

.portal-spotlight-item-body {
    flex: 1 !important;
    min-width: 0 !important;
}

.portal-spotlight-item-label {
    display: block !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.portal-spotlight-item-sub {
    display: block !important;
    font-size: 0.75rem !important;
    color: var(--muted, #64748b) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 1px !important;
}

/* ── Empty / loading state ────────────────────────────────────────── */
.portal-spotlight-empty {
    padding: 36px 24px !important;
    text-align: center !important;
    color: var(--muted, #94a3b8) !important;
    font-size: 0.9rem !important;
}

/* ── Footer keyboard hints ────────────────────────────────────────── */
.portal-spotlight-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 9px 20px !important;
    border-top: 1px solid var(--line, #e2e8f0) !important;
    font-size: 11px !important;
    color: var(--muted, #94a3b8) !important;
    background: var(--rekaz-bg-filter, #fafcff) !important;
}

.portal-spotlight-footer kbd {
    font-size: 10px !important;
    font-family: inherit !important;
    background: var(--rekaz-bg-card, #fff) !important;
    border: 1px solid var(--line, #e2e8f0) !important;
    border-radius: 4px !important;
    padding: 1px 6px !important;
    color: var(--muted, #64748b) !important;
    display: inline-block !important;
    margin-inline-end: 3px !important;
}

/* ── Mobile overrides ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    #portal-spotlight-root:not([hidden]) {
        padding: 0 !important;
        align-items: flex-end !important;
    }

    .portal-spotlight-dialog {
        border-radius: 20px 20px 0 0 !important;
        max-width: 100% !important;
        animation: spotlightPanelInMobile 0.22s cubic-bezier(0.22, 1, 0.36, 1) both !important;
    }

    @keyframes spotlightPanelInMobile {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0);    }
    }

    .portal-spotlight-results { max-height: 55vh !important; }
}

.header-spotlight-hint {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    border: 1px solid color-mix(in srgb,#F8FBFF 34%,transparent) !important;
    background: linear-gradient(135deg,
        color-mix(in srgb,#F8FBFF 18%,transparent),
        color-mix(in srgb,var(--brand-cyan, #42D9F4) 14%,transparent)) !important;
    color: #F8FBFF !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    font-family: inherit !important;
    letter-spacing: .02em !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-shadow: 0 10px 24px color-mix(in srgb,var(--brand-navy-soft) 18%,transparent) !important;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

.header-spotlight-hint span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 16px !important;
    line-height: 1 !important;
}

.header-spotlight-hint span:first-child,
.header-spotlight-hint span:last-child {
    padding: 0 1px !important;
}

.header-spotlight-hint:hover,
.header-spotlight-hint:focus-visible {
    transform: translateY(-1px) !important;
    border-color: #F8FBFF !important;
    background: linear-gradient(135deg,
        color-mix(in srgb,#F8FBFF 26%,transparent),
        color-mix(in srgb,var(--brand-blue, #007bb5) 22%,transparent)) !important;
    box-shadow: 0 14px 32px color-mix(in srgb,var(--brand-navy-soft) 24%,transparent) !important;
    outline: none !important;
}

@media (max-width: 640px) {
    .header-spotlight-hint { display: none !important; }
}