/* ========================================================================
   Alien Manager — v2 global styles
   Tailwind CDN handles the bulk; this file owns design tokens,
   form normalization, focus rings, scrollbars, and small animations.
   ======================================================================== */

:root {
    --brand-500: #3b82f6;
    --brand-600: #2563eb;
    --brand-700: #1d4ed8;
    --surface:        #0b1220;
    --surface-soft:   #0f172a;
    --surface-elev:   #111c34;
    --surface-border: #1e293b;
}

html { -webkit-text-size-adjust: 100%; }

/* Body font (Tailwind config sets font-family but make sure it always wins) */
body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Hide Alpine elements before initialization */
[x-cloak] { display: none !important; }

/* ---------- Form inputs (legacy templates use raw <input> with Tailwind utilities)
   ----------------------------------------------------------------------------
   v2 #27 — selectors wrapped in `:where()` so their specificity collapses to
   0,0,0. Pre-#27 the bare `input[type="search"]` selector had specificity
   0,1,1 (one type + one attribute) which beat any Tailwind class utility
   (`.pl-9`, `.pl-10`, `.px-3` etc) at 0,1,0. The visible symptom was the
   icon-collision the user flagged: on /wifi the search input had
   `class="... pl-9 ..."` but the global `padding: 0.5rem 0.75rem` here
   forced padding-left back to 12px → the placeholder text "Search by
   name or SSID…" rendered directly under the magnifying-glass icon.
   The same applied to login (pl-10), the devices filter bar, and any
   other input/select that tried to make room for a prefix/suffix icon.

   With `:where()` the selectors still match (so legacy plain <input>s in
   wizard / settings keep their visual styling) but ANY class utility on
   the input wins. No template change required for the global fix to
   take effect. */
:where(input[type="text"], input[type="password"], input[type="url"], input[type="number"],
input[type="email"], input[type="search"], input[type="datetime-local"], input[type="date"],
input[type="time"], select, textarea) {
    background-color: #0f172a;
    color: #e2e8f0;
    border: 1px solid #334155;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
:where(input[type="text"]:focus, input[type="password"]:focus, input[type="url"]:focus,
input[type="number"]:focus, input[type="email"]:focus, input[type="search"]:focus,
input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="time"]:focus,
select:focus, textarea:focus) {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
    outline: none;
}
:where(input)::placeholder, :where(textarea)::placeholder { color: #64748b; }
:where(input[type="file"]) { color: #94a3b8; font-size: 0.875rem; }
:where(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--brand-600);
}
:where(input[type="range"]) { accent-color: var(--brand-500); }

/* Disable autofill yellow */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: #e2e8f0 !important;
    -webkit-box-shadow: 0 0 0 1000px #0f172a inset !important;
    transition: background-color 5000s ease-in-out 0s;
    caret-color: #e2e8f0;
}

/* ---------- Tables ---------- */
table th { white-space: nowrap; }
table.sticky-header thead th {
    position: sticky;
    top: 0;
    background-color: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(8px);
    z-index: 1;
}

/* ---------- Scrollbars (Webkit) ---------- */
* { scrollbar-width: thin; scrollbar-color: #334155 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #334155; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #475569; background-clip: padding-box; border: 2px solid transparent; }

/* ---------- Utility helpers ---------- */
.truncate-hash {
    max-width: 120px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; display: inline-block;
}

/* Skeleton loader shimmer */
.skeleton {
    background: linear-gradient(90deg, #1e293b 0%, #334155 50%, #1e293b 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
    border-radius: 0.5rem;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Spinner */
.spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Focus-visible helper for keyboard nav */
:focus-visible {
    outline: none;
}

/* Selection */
::selection { background: rgba(59,130,246,0.35); color: #fff; }

/* ---------- Tab buttons (used by detail/index pages until each is redesigned) ---------- */
.tab-btn[aria-selected="true"], .tab-btn.active {
    color: var(--brand-500);
    border-color: var(--brand-500);
}

/* ---------- Toast styling (rendered by mdmToast in app.js) ---------- */
.mdm-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    min-width: 240px;
    max-width: 400px;
    padding: 0.75rem 0.875rem;
    border-radius: 0.875rem;
    border: 1px solid var(--surface-border);
    background-color: var(--surface-elev);
    color: #e2e8f0;
    font-size: 0.875rem;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    transform: translateX(0);
    opacity: 1;
    transition: transform 220ms ease, opacity 200ms ease;
}
.mdm-toast.is-leaving { transform: translateX(20px); opacity: 0; }
.mdm-toast--success { border-color: rgba(16, 185, 129, 0.35); }
.mdm-toast--error   { border-color: rgba(244, 63, 94, 0.4); }
.mdm-toast--info    { border-color: rgba(59, 130, 246, 0.35); }
.mdm-toast--warn    { border-color: rgba(245, 158, 11, 0.35); }
.mdm-toast__icon { flex: 0 0 auto; }
.mdm-toast__body { flex: 1 1 auto; line-height: 1.4; }
.mdm-toast__close {
    flex: 0 0 auto;
    margin: -2px -4px -2px 4px;
    padding: 2px;
    border-radius: 6px;
    color: #94a3b8;
    cursor: pointer;
    background: transparent;
    border: 0;
    transition: background-color 120ms ease, color 120ms ease;
}
.mdm-toast__close:hover { background-color: rgba(255,255,255,0.08); color: #f1f5f9; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}