/*
 * Global command palette (Spotlight / ⌘K)
 *
 * Modal overlay with:
 *   - Search input
 *   - Grouped results (Pages / Customers / SIM cards)
 *   - Keyboard navigation (↑ ↓ / Enter / Esc)
 *
 * Auto-injected by /js/command-palette.js; available to every page that
 * includes foot.html. Header trigger uses `.cmdk-trigger`.
 */

/* ─── Header trigger pill ─────────────────────────────────────────── */

.cmdk-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 10px 0 14px;
    margin: 12px 0 12px 12px;
    background: var(--bg-subtle);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--text-tertiary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    min-width: 300px;
    transition: background-color var(--motion-fast) var(--ease-out),
        border-color var(--motion-fast) var(--ease-out),
        color var(--motion-fast) var(--ease-out);
}

.cmdk-trigger:hover,
.cmdk-trigger:focus-visible {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
    color: var(--text-secondary);
    outline: none;
}

.cmdk-trigger .cmdk-trigger-icon {
    font-size: 13px;
    color: var(--text-tertiary);
}

.cmdk-trigger .cmdk-trigger-label {
    flex: 1;
    text-align: left;
    color: inherit;
}

.cmdk-trigger .cmdk-kbd {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* Keyboard key chip */
.cmdk-kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: 3px 6px;
    min-width: 18px;
    text-align: center;
    box-shadow: 0 1px 0 var(--border-subtle);
}

/* Hide the trigger label (keep icon + kbd) on very small screens */
@media (max-width: 767px) {
    .cmdk-trigger {
        min-width: 0;
        padding: 0 10px;
    }
    .cmdk-trigger .cmdk-trigger-label,
    .cmdk-trigger .cmdk-kbd {
        display: none;
    }
}

/* Trigger pill grows on larger viewports so it fills more of the header
   bar instead of looking like a stubby chip. Project breakpoints:
   md = 768px, lg = 992px. Base value (260px) handles the gap between
   sm and md. */
@media (min-width: 768px) {
    .cmdk-trigger {
        min-width: 320px;
    }
}

@media (min-width: 992px) {
    .cmdk-trigger {
        min-width: 420px;
    }
}

/* Sidebar-nav (mobile sheet) variant – full width rather than pill */
.sidebar-search .cmdk-trigger {
    display: flex;
    width: 100%;
    margin: 0;
    min-width: 0;
}

.sidebar-search .cmdk-trigger .cmdk-trigger-label,
.sidebar-search .cmdk-trigger .cmdk-kbd {
    display: inline-flex;
}

/* ─── Modal overlay ───────────────────────────────────────────────── */

.cmdk-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: rgba(15, 19, 26, 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-base) var(--ease-out);
}

html[data-theme="dark"] .cmdk-overlay {
    background: rgba(5, 8, 13, 0.55);
}

.cmdk-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* ─── Palette card ────────────────────────────────────────────────── */

.cmdk-palette {
    width: 100%;
    max-width: 640px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transform: translateY(-8px) scale(0.98);
    opacity: 0;
    transition: transform var(--motion-base) var(--ease-out),
        opacity var(--motion-base) var(--ease-out);
}

.cmdk-overlay.is-open .cmdk-palette {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* ─── Input row ───────────────────────────────────────────────────── */

.cmdk-input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface);
}

.cmdk-input-wrap .cmdk-search-icon {
    color: var(--text-tertiary);
    font-size: 16px;
    flex-shrink: 0;
}

.cmdk-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 500;
    padding: 4px 0;
    line-height: 1.4;
}

.cmdk-input::placeholder {
    color: var(--text-tertiary);
    font-weight: 400;
}

.cmdk-close {
    appearance: none;
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
    transition: background-color var(--motion-fast) var(--ease-out),
        color var(--motion-fast) var(--ease-out);
}

.cmdk-close:hover {
    background: var(--bg-subtle);
    color: var(--text-secondary);
}

/* ─── Results ─────────────────────────────────────────────────────── */

.cmdk-results {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    scrollbar-width: thin;
}

.cmdk-section + .cmdk-section {
    margin-top: 4px;
}

/* Divider between Pages and Customers/SIMs — only before the remote section, so
   it doesn't fire between nav-group sections in the empty-query browsing view.
   The :not(.cmdk-section-hidden) guard prevents a stray line when the Pages
   section is hidden (no pages + remote has results). */
.cmdk-section:not(.cmdk-section-hidden) + .cmdk-section[data-remote-section] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-subtle);
}

/* Pages section hidden while remote is loading or returned results (so the
   "No pages match" banner doesn't show when the user's real target is a
   customer/SIM). Un-hidden by renderRemoteInto if remote is also empty. */
.cmdk-section-hidden {
    display: none;
}

.cmdk-section-title {
    padding: 8px 20px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cmdk-section-title .cmdk-loading-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--border-subtle);
    border-top-color: var(--accent);
    animation: cmdk-spin 0.7s linear infinite;
}

@keyframes cmdk-spin {
    to { transform: rotate(360deg); }
}

.cmdk-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    cursor: pointer;
    color: var(--text-primary);
    transition: background-color var(--motion-fast) var(--ease-out);
    border-left: 2px solid transparent;
}

.cmdk-item:hover {
    background: var(--bg-subtle);
}

.cmdk-item.is-active {
    background: var(--accent-muted);
    border-left-color: var(--accent);
}

.cmdk-item-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* SVG icons are sized at 0.9em globally to match FA glyphs in tight inline
   contexts (like the dropdown). The palette cell has more breathing room
   around the glyph, so SVG icons feel undersized at 0.9em — bump back to
   the cell's full 1em (≈14px) here so SVG and FA siblings read the same. */
.cmdk-item-icon .svg-icon {
    width: 1em;
    height: 1em;
}

.cmdk-item.is-active .cmdk-item-icon {
    background: var(--accent);
    color: var(--text-on-accent);
}

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

.cmdk-item-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmdk-item-subtitle {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmdk-item-meta {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.cmdk-item mark {
    background: var(--accent-ring);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

/* ─── Empty / hint state ──────────────────────────────────────────── */

.cmdk-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 13px;
}

/* Inline empty state inside a .cmdk-section (e.g. "No pages match ..."). */
.cmdk-empty-inline {
    padding: 12px 20px;
    text-align: left;
}

.cmdk-empty-icon {
    font-size: 24px;
    color: var(--text-tertiary);
    margin-bottom: 8px;
    display: block;
}

/* ─── Footer hint bar ─────────────────────────────────────────────── */

.cmdk-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 20px;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-subtle);
    color: var(--text-tertiary);
    font-size: 11px;
}

.cmdk-footer-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cmdk-footer-group + .cmdk-footer-group {
    margin-left: 12px;
}

.cmdk-footer .cmdk-kbd {
    font-size: 10px;
    padding: 2px 5px;
}

@media (max-width: 520px) {
    .cmdk-overlay { padding: 6vh 8px 8px; }
    .cmdk-palette { max-height: 85vh; }
    .cmdk-footer-hide-mobile { display: none; }
}