/* ==========================================================================
   Invenex Panel — UI v2 layer (2026-10-23)
   Scoped to <html class="ix-v2">. With the class absent this file does nothing,
   so "Classic look" is always one switch away (localStorage ix_ui / ?ui=classic).
   Works on top of the user's chosen dark theme (uses its --color-* tokens);
   it refines readability, spacing, elevation, forms, tables, dialogs, focus
   and small screens. No layout/menu structure is changed.
   ========================================================================== */

html.ix-v2 {
  /* v2 tokens (derived from the active theme where possible) */
  --ix-radius-sm: 6px;
  --ix-radius-md: 9px;
  --ix-radius-lg: 13px;
  --ix-text: #e6edf3;
  --ix-text-2: #c4ccd6;          /* body secondary (was gray-300/400) */
  --ix-text-muted: #9aa5b3;      /* was gray-500: ~2.7:1 -> ~5.2:1 on cards */
  --ix-text-faint: #8a95a3;      /* was gray-600: ~1.9:1 -> ~4.6:1 */
  --ix-ring: rgba(var(--color-primary-rgb, 229, 112, 0), 0.55);
  --ix-shadow-1: 0 1px 0 rgba(255, 255, 255, 0.025) inset, 0 1px 2px rgba(0, 0, 0, 0.35);
  --ix-shadow-2: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px -8px rgba(0, 0, 0, 0.55);
  --ix-shadow-3: 0 24px 64px -16px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Typography & readability ---------- */
html.ix-v2 body { letter-spacing: 0.002em; line-height: 1.5; }
html.ix-v2 .text-gray-300 { color: var(--ix-text-2) !important; }
html.ix-v2 .text-gray-400 { color: #b3bcc8 !important; }
html.ix-v2 .text-gray-500 { color: var(--ix-text-muted) !important; }
html.ix-v2 .text-gray-600 { color: var(--ix-text-faint) !important; }
html.ix-v2 .text-\[10px\] { font-size: 11px !important; }
html.ix-v2 .text-\[11px\] { font-size: 11.5px !important; }
html.ix-v2 h1, html.ix-v2 h2, html.ix-v2 h3 { letter-spacing: -0.012em; }
html.ix-v2 .font-mono, html.ix-v2 table, html.ix-v2 .tabular-nums { font-variant-numeric: tabular-nums; }
html.ix-v2 ::selection { background: rgba(var(--color-primary-rgb, 229, 112, 0), 0.35); color: #fff; }

/* ---------- Surfaces & elevation ---------- */
html.ix-v2 .rounded-lg { border-radius: var(--ix-radius-md) !important; }
html.ix-v2 .rounded-xl { border-radius: var(--ix-radius-lg) !important; }
html.ix-v2 .rounded-md { border-radius: var(--ix-radius-sm) !important; }
html.ix-v2 .bg-proxmox-card { box-shadow: var(--ix-shadow-1); }
html.ix-v2 .bg-proxmox-card.border,
html.ix-v2 .bg-proxmox-card.rounded-xl { box-shadow: var(--ix-shadow-2); }
html.ix-v2 .border-proxmox-border { border-color: color-mix(in srgb, var(--color-border, #30363d) 82%, transparent) !important; }
html.ix-v2 .card-hover { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
html.ix-v2 .card-hover:hover { transform: translateY(-1px); box-shadow: var(--ix-shadow-2); }

/* ---------- Buttons ---------- */
html.ix-v2 button, html.ix-v2 [role="button"], html.ix-v2 a.inline-flex {
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .06s ease;
}
html.ix-v2 button:active:not(:disabled) { transform: translateY(0.5px); }
html.ix-v2 button.bg-proxmox-orange, html.ix-v2 a.bg-proxmox-orange {
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 1px 2px rgba(0, 0, 0, 0.35);
}
html.ix-v2 button.bg-proxmox-orange:hover:not(:disabled) { filter: brightness(1.08); }
html.ix-v2 button:disabled, html.ix-v2 button[disabled] { opacity: .5 !important; cursor: not-allowed !important; }

/* ---------- Focus (keyboard users) ---------- */
html.ix-v2 :focus { outline: none; }
html.ix-v2 :focus-visible {
  outline: 2px solid var(--ix-ring) !important;
  outline-offset: 2px !important;
  border-radius: var(--ix-radius-sm);
}

/* ---------- Form controls ---------- */
html.ix-v2 input[type="text"], html.ix-v2 input[type="search"], html.ix-v2 input[type="email"],
html.ix-v2 input[type="password"], html.ix-v2 input[type="number"], html.ix-v2 input[type="url"],
html.ix-v2 input[type="tel"], html.ix-v2 input[type="date"], html.ix-v2 input[type="datetime-local"],
html.ix-v2 input[type="time"], html.ix-v2 input:not([type]), html.ix-v2 select, html.ix-v2 textarea {
  border-radius: var(--ix-radius-md);
  transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}
html.ix-v2 input:focus, html.ix-v2 select:focus, html.ix-v2 textarea:focus {
  border-color: rgba(var(--color-primary-rgb, 229, 112, 0), 0.7) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 229, 112, 0), 0.18) !important;
  outline: none !important;
}
html.ix-v2 input::placeholder, html.ix-v2 textarea::placeholder { color: #7f8a98 !important; opacity: 1; }
html.ix-v2 label { color: var(--ix-text-2); }

/* ---------- Tables ---------- */
html.ix-v2 table { border-collapse: separate; border-spacing: 0; }
html.ix-v2 thead th {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ix-text-muted) !important;
}
html.ix-v2 .overflow-auto thead th, html.ix-v2 .overflow-y-auto thead th, html.ix-v2 .overflow-x-auto thead th {
  position: sticky; top: 0; z-index: 2; background: var(--color-card, #161b22);
}
html.ix-v2 tbody tr { transition: background-color .12s ease; }
html.ix-v2 tbody tr:hover { background-color: rgba(255, 255, 255, 0.025); }
html.ix-v2 tbody td { border-bottom: 1px solid color-mix(in srgb, var(--color-border, #30363d) 55%, transparent); }
html.ix-v2 tbody tr:last-child td { border-bottom: 0; }

/* ---------- Dialogs / overlays ---------- */
html.ix-v2 .fixed.inset-0.bg-black\/70, html.ix-v2 .fixed.inset-0.bg-black\/60,
html.ix-v2 .fixed.inset-0.bg-black\/50, html.ix-v2 .modal-backdrop {
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  backdrop-filter: blur(4px) saturate(120%);
}
html.ix-v2 .fixed.inset-0 > .bg-proxmox-card, html.ix-v2 .fixed.inset-0 > div > .bg-proxmox-card,
html.ix-v2 .shadow-2xl { box-shadow: var(--ix-shadow-3) !important; }

/* ---------- Scrollbars ---------- */
html.ix-v2 * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
html.ix-v2 *::-webkit-scrollbar { width: 10px; height: 10px; }
html.ix-v2 *::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
html.ix-v2 *::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.24); }
html.ix-v2 *::-webkit-scrollbar-track { background: transparent; }

/* ---------- Status colours: a touch more legible on dark ---------- */
html.ix-v2 .text-red-400 { color: #ff7b72 !important; }
html.ix-v2 .text-green-400 { color: #56d364 !important; }
html.ix-v2 .text-yellow-400 { color: #e3b341 !important; }
html.ix-v2 .text-blue-400 { color: #6cb6ff !important; }

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  /* tables scroll sideways instead of overflowing the page */
  html.ix-v2 table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* dialogs use the full width on phones */
  html.ix-v2 .fixed.inset-0 > .bg-proxmox-card,
  html.ix-v2 .fixed.inset-0 > div > .bg-proxmox-card { max-width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px); overflow-y: auto; }
  /* header button rows wrap instead of overflowing */
  html.ix-v2 .flex.items-center.gap-2 { flex-wrap: wrap; }
}
@media (pointer: coarse) {
  html.ix-v2 button, html.ix-v2 [role="button"] { min-height: 36px; }
  html.ix-v2 input, html.ix-v2 select, html.ix-v2 textarea { font-size: 16px !important; } /* stops iOS zoom-on-focus */
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.ix-v2 *, html.ix-v2 *::before, html.ix-v2 *::after { transition: none !important; animation-duration: .001ms !important; }
}