/* ── number input: no spinners ───────────────────────── */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* ── Dark-mode design tokens ─────────────────────────── */
/* Light defaults */
:root {
    --dm-bg:          #f3f4f6;   /* gray-100 */
    --dm-surface:     #ffffff;
    --dm-surface2:    #f9fafb;   /* gray-50 */
    --dm-border:      #e5e7eb;   /* gray-200 */
    --dm-text:        #111827;   /* gray-900 */
    --dm-text-soft:   #374151;   /* gray-700 */
    --dm-muted:       #6b7280;   /* gray-500 */
    --dm-nav-bg:      #1e3a5f;   /* deep navy */
    --dm-nav-text:    #e2e8f0;
    --dm-nav-hover:   #93c5fd;   /* blue-300 */
    --dm-nav-hint:    #3b5a8a;   /* muted nav border */
    --dm-accent:      #1d4ed8;   /* blue-700 */
    --dm-result-hover:#eff6ff;   /* blue-50 */
}

/* Dark overrides — warm charcoal, not harsh slate */
.dark {
    --dm-bg:          #1a1f2e;   /* deep navy-charcoal */
    --dm-surface:     #242938;   /* card bg */
    --dm-surface2:    #1e2333;   /* slightly deeper */
    --dm-border:      #353b52;   /* subtle border */
    --dm-text:        #e8eaf0;   /* warm off-white */
    --dm-text-soft:   #b0b8cc;
    --dm-muted:       #6b7a99;   /* muted blue-grey */
    --dm-nav-bg:      #151929;   /* darker navy */
    --dm-nav-text:    #c8d0e0;
    --dm-nav-hover:   #7eb3f5;   /* soft blue */
    --dm-nav-hint:    #2a3150;
    --dm-accent:      #4e8ef7;
    --dm-result-hover:#2a3150;
}

/* Apply tokens to body */
body {
    background-color: var(--dm-bg);
    color: var(--dm-text);
    transition: background-color 0.2s, color 0.2s;
}

/* Inputs — global dark override (no !important conflict with Tailwind color utilities) */
.dark input, .dark select, .dark textarea {
    background-color: var(--dm-surface2);
    border-color: var(--dm-border);
    color: var(--dm-text);
}
.dark input::placeholder { color: var(--dm-muted); }

/* ── Nav ──────────────────────────────────────────────── */
nav { background-color: var(--dm-nav-bg) !important; }
nav a, nav button { color: var(--dm-nav-text) !important; }
nav a:hover, nav button:hover { color: var(--dm-nav-hover) !important; }

/* ── Dev environment indicator ────────────────────────── */
.dev nav { background-color: #4f1f1f !important; } /* red-800 */

/* ── Nav dropdown (Trips, etc.) ──────────────────────── */
.nav-dropdown a { color: var(--dm-text) !important; }
.nav-dropdown a:hover { background-color: var(--dm-result-hover) !important; color: var(--dm-text) !important; }

/* ── User menu dropdown ───────────────────────────────── */
#user-menu { display: none; }
#user-menu.open { display: block; }
#user-menu {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
}
#user-menu a, #user-menu button { color: var(--dm-text) !important; }
#user-menu a:hover, #user-menu button:hover {
    background-color: var(--dm-result-hover) !important;
}

/* ── Spotlight overlay ────────────────────────────────── */
#spotlight-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(3px);
}
#spotlight-overlay.open {
    display: flex; align-items: flex-start;
    justify-content: center; padding-top: 12vh;
}
#spotlight-box {
    background-color: var(--dm-surface);
    border: 1px solid var(--dm-border);
}
#spotlight-input {
    background: transparent;
    color: var(--dm-text);
}
#spotlight-input::placeholder { color: var(--dm-muted); }

.search-result-item:hover,
.search-result-item[data-focused] {
    background-color: var(--dm-result-hover) !important;
}

/* spotlight quick-action buttons */
.spotlight-action {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; cursor: pointer;
    color: var(--dm-text-soft);
    font-size: 0.875rem;
    border-radius: 0;
    text-decoration: none;
    transition: background 0.1s;
}
.spotlight-action:hover { background-color: var(--dm-result-hover); color: var(--dm-text); }
.spotlight-action .action-icon {
    width: 28px; height: 28px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    background-color: var(--dm-surface2);
    border: 1px solid var(--dm-border);
    flex-shrink: 0;
}

/* ── Wayfinding pill icon colors ─────────────────────── */
.pill-trips  { color: #059669; }
.dark .pill-trips  { color: #6ee7b7; }

.pill-customers { color: #b45309; }
.dark .pill-customers { color: #fcd34d; }

.pill-reservations { color: #be185d; }
.dark .pill-reservations { color: #f472b6; }

.pill-crew { color: #4f46e5; }
.dark .pill-crew { color: #a78bfa; }