/**
 * HyperUI Swarm Manager - FlyonUI Theme Adapter & Extensions
 * Enhances FlyonUI with custom tokens for GPU computing, VRAM meters, and container statuses.
 */

:root {
  --fx-header-height: 3.5rem;
  --hyperui-vram-gradient: linear-gradient(90deg, #6366f1 0%, #a855f7 100%);
  --hyperui-storage-gradient: linear-gradient(90deg, #3b82f6 0%, #06b6d4 100%);
  --hyperui-success-gradient: linear-gradient(90deg, #10b981 0%, #059669 100%);
  --hyperui-warning-gradient: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
  --hyperui-danger-gradient: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}

/* Status Indicators */
.status-indicator-running {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background-color: #10b981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.65);
  animation: pulse-green 2s infinite ease-in-out;
}

.status-indicator-stopped {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background-color: #ef4444;
}

.status-indicator-hibernated {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background-color: #8b5cf6;
}

@keyframes pulse-green {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(1.15); }
}

/* Quota & Progress Bars */
.quota-meter-vram {
  background: var(--hyperui-vram-gradient);
  border-radius: 9999px;
  transition: width 0.4s ease;
}

.quota-meter-storage {
  background: var(--hyperui-storage-gradient);
  border-radius: 9999px;
  transition: width 0.4s ease;
}

/* GPU Hardware Badge */
.badge-gpu-h100 {
  background-color: rgba(99, 102, 241, 0.15);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.25);
  font-weight: 600;
}

.badge-gpu-b200 {
  background-color: rgba(168, 85, 247, 0.15);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.25);
  font-weight: 700;
}

.badge-gpu-l40s {
  background-color: rgba(14, 165, 233, 0.15);
  color: #0ea5e9;
  border: 1px solid rgba(14, 165, 233, 0.25);
  font-weight: 600;
}

/* Hero Banner Accent */
.hero-banner-accent {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 50%, #1e40af 100%);
}

[data-theme="dark"] .hero-banner-accent {
  background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
}

/* Terminal & Logs Container */
.terminal-output-window {
  background-color: #0f172a;
  color: #38bdf8;
  font-family: 'Fira Code', ui-monospace, monospace;
  border-radius: 0.75rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ===========================================================================
   FlyonUI Application Shell (issue #125) — navbar, drawer, overlays, alerts
   ---------------------------------------------------------------------------
   Load order in base.html: flyonui-components.css (semantic components,
   @layer base/utilities) -> flyonui.css (JIT utilities + theme tokens,
   @layer) -> style.css (legacy, unlayered — unlayered always beats @layer,
   so legacy wins ties) -> THIS FILE (unlayered, last — always wins). Shell
   styles are scoped under .fx-* / .fx-header so legacy pages are untouched,
   and legacy overrides are re-asserted with higher specificity.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   Dark theme token corrections (accessibility)
   ---------------------------------------------------------------------------
   The vendored "dark" theme keeps primary/error at mid-lightness (oklch ~54%)
   and light content tokens, which fails WCAG whenever those accents are used
   as TEXT on dark surfaces (primary-as-text ~2.1:1, error-as-text ~2.7:1,
   warning solid buttons ~1.0:1). Brighten the accents and flip the content
   tokens to dark so both text-on-dark and dark-text-on-accent pass.
   --------------------------------------------------------------------------- */
[data-theme="dark"] .btn-warning {
  color: var(--color-warning-content);
}
[data-theme="dark"] .btn-warning.btn-soft {
  background-color: color-mix(in oklab, var(--color-warning) 15%, var(--color-base-100));
  color: var(--color-warning);
}

/* Dashboard hero: the light-mode gradient uses the saturated primary. The
   dark-theme primary is a bright violet, which turns the banner pale lavender
   and kills the hardcoded white title/ghost-button contrast - deepen it onto
   the dark surface instead (hero text/buttons are designed white-on-dark). */
[data-theme="dark"] .fx-dash-hero,
[data-theme="synthwave"] .fx-dash-hero,
[data-theme="luxury"] .fx-dash-hero {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--color-primary) 32%, var(--color-base-300)) 0%,
    color-mix(in oklab, var(--color-primary) 12%, var(--color-base-300)) 60%,
    var(--color-base-300) 100%);
  color: oklch(92% 0.02 288);
}

[data-theme="dark"] {
  --color-primary: oklch(78% 0.13 288);
  --color-primary-content: oklch(24% 0.07 288);
  --color-secondary: oklch(78% 0.015 303);
  --color-secondary-content: oklch(24% 0.02 303);
  --color-error: oklch(76% 0.14 25);
  --color-error-content: oklch(22% 0.08 25);
  --color-warning-content: oklch(24% 0.06 80);
  --color-info: oklch(76% 0.1 222);
  --color-info-content: oklch(22% 0.06 222);
  --color-success: oklch(78% 0.15 147);
  --color-success-content: oklch(22% 0.07 147);
  /* Vendored dark keeps neutral at ~66% lightness - too dim for .btn-soft
     text (3.65:1 on its own soft background). Brighten both halves. */
  --color-neutral: oklch(87% 0.012 295.28);
  --color-neutral-content: oklch(22% 0.02 295.28);
}

/* ---------------------------------------------------------------------------
   Synthwave theme (not part of the vendored FlyonUI theme token sets)
   --------------------------------------------------------------------------- */
[data-theme="synthwave"] {
  color-scheme: dark;
  --color-base-100: #1a1033;
  --color-base-200: #140b28;
  --color-base-300: #0d0719;
  --color-base-content: #e8e2ff;
  --color-primary: #ff71ce;
  --color-primary-content: #1a1033;
  --color-secondary: #01cdfe;
  --color-secondary-content: #04121f;
  --color-accent: #b967ff;
  --color-accent-content: #160b26;
  --color-neutral: #2b1b4d;
  --color-neutral-content: #d1c8f0;
  --color-info: #01cdfe;
  --color-info-content: #04121f;
  --color-success: #05ffa1;
  --color-success-content: #04120c;
  --color-warning: #fffb96;
  --color-warning-content: #201c05;
  --color-error: #ff2e63;
  --color-error-content: #fff5f8;
  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --radius-box: 1rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

/* ---------------------------------------------------------------------------
   Tailwind utilities missing from the vendored JIT build (verified absent)
   --------------------------------------------------------------------------- */
.size-2 { width: 0.5rem; height: 0.5rem; }
.size-3\.5 { width: 0.875rem; height: 0.875rem; }
.size-4\.5 { width: 1.125rem; height: 1.125rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2\.5 { gap: 0.625rem; }
.ml-6 { margin-left: 1.5rem; }
.ml-auto { margin-left: auto; }
.p-0 { padding: 0; }
.p-1\.5 { padding: 0.375rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.top-1 { top: 0.25rem; }
.right-0 { right: 0; }
.min-w-44 { min-width: 11rem; }
.min-w-56 { min-width: 14rem; }
.text-left { text-align: left; }
.leading-tight { line-height: 1.25; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-tight { letter-spacing: -0.025em; }
.rounded-xl { border-radius: 0.75rem; }
.border-b { border-bottom-width: 1px; }
.bg-primary\/20 { background-color: color-mix(in oklab, var(--color-primary) 20%, transparent); }
.hover\:bg-base-200:hover { background-color: var(--color-base-200); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.2), 0 8px 10px -6px rgb(0 0 0 / 0.2); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
.d-none { display: none !important; }

/* ---------------------------------------------------------------------------
   FlyonUI component variants missing from both builds
   --------------------------------------------------------------------------- */
.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--btn-color, var(--color-base-content));
  --btn-border: transparent;
  --btn-shadow: none;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) {
  background-color: var(--chip-muted-bg);
}
.input-ghost {
  background-color: transparent;
  border: none;
  outline: none;
  box-shadow: none;
}
.input-ghost:focus, .input-ghost:focus-within { outline: none; box-shadow: none; }

/* Overlays: HSOverlay toggles `hidden`/`open`; keep `hidden` authoritative
   even against unlayered display rules. */
.overlay.hidden { display: none !important; }
.overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: var(--overlay-backdrop);
  backdrop-filter: blur(2px);
}

/* Dropdown containers need positioning even without other markup */
.dropdown { position: relative; display: inline-flex; }
.dropdown-menu { z-index: 50; }

/* ---------------------------------------------------------------------------
   Shell: sticky top navbar
   --------------------------------------------------------------------------- */
.fx-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
}

.fx-nav-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1rem;
}

.fx-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  min-height: 3.5rem;
}
@media (max-width: 1023.98px) {
  .fx-nav { flex-wrap: wrap; }
}

.fx-brand { text-decoration: none; }
.fx-brand:hover { text-decoration: none; }
.fx-brand-logo { height: 2rem; width: auto; display: block; }
.fx-brand-name {
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.025em;
  color: var(--color-base-content);
  line-height: 1.25;
}
.fx-brand-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-faint);
}

/* Neutralize legacy .btn inside the shell (legacy wins unlayered ties) */
.fx-header .btn {
  padding: 0 var(--btn-p, 1rem);
  border-radius: var(--radius-field, 0.25rem);
  font-size: 0.875rem;
  font-weight: 500;
  transform: none;
  gap: 0.5rem;
}
.fx-header .btn:hover { transform: none; }
.fx-header a:hover { text-decoration: none; }

/* Neutralize legacy .badge inside the shell */
.fx-header .badge {
  padding: 0 0.5rem;
  border-radius: var(--radius-selector, 0.25rem);
  font-size: 0.75rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fx-header .badge-xs { height: 0.9rem; font-size: 0.625rem; padding: 0 0.3rem; }

/* Dropdown menu items — legacy .dropdown-item uses !important, so re-assert */
.fx-header .dropdown-item {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.625rem 1rem !important;
  border-radius: var(--radius-field, 0.25rem);
  color: var(--color-base-content) !important;
  background-color: transparent !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease !important;
}
.fx-header .dropdown-item:hover,
.fx-header .dropdown-item:focus-visible {
  background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent) !important;
  text-decoration: none !important;
}
.fx-header .dropdown-item.dropdown-active {
  background-color: color-mix(in oklab, var(--color-primary) 12%, transparent) !important;
  color: var(--color-primary) !important;
  font-weight: 600;
}
.fx-item-danger { color: var(--color-error) !important; }
.fx-item-danger:hover { background-color: color-mix(in oklab, var(--color-error) 10%, transparent) !important; }
.fx-header .dropdown-header,
.fx-dd-header {
  background: transparent;
  color: var(--text-faint);
  padding: 0.25rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.fx-divider {
  height: 1px;
  margin: 0.25rem 0;
  background-color: var(--chip-muted-bg);
}
.fx-empty {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: var(--text-faint);
}

/* Profile dropdown trigger + panel header */
.fx-profile-toggle {
  padding: 0.25rem 0.375rem;
  border-radius: 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-base-content);
  transition: background-color 0.15s ease;
}
.fx-profile-toggle:hover { background-color: var(--chip-muted-bg); }
.fx-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: var(--color-primary);
  color: var(--color-primary-content);
  font-weight: 700;
  font-size: 0.75rem;
  width: 2rem;
  height: 2rem;
}
.fx-profile-name { font-size: 0.75rem; font-weight: 600; }
.fx-profile-role {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
}
.fx-profile-header {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
}
.fx-profile-name-lg { font-size: 0.75rem; font-weight: 700; }
.fx-profile-email {
  font-size: 11px;
  color: var(--text-faint);
  word-break: break-all;
}

/* Mobile navigation drawer */
#fx-nav-menu {
  background-color: var(--color-base-100);
  border-top: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
}
.fx-mobile-menu {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0 0.75rem;
}
.fx-mobile-menu .dropdown-item { font-size: 0.9375rem; }

/* ---------------------------------------------------------------------------
   Shell: quick search overlay
   --------------------------------------------------------------------------- */
.fx-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 1rem 1rem;
}
.fx-search-panel {
  width: 100%;
  max-width: 32rem;
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.35);
  overflow: hidden;
  position: relative;
  z-index: 1051;
}
.fx-search-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
}
.fx-search-head .input { font-size: 0.875rem; }
.fx-search-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.75rem;
  max-height: 18rem;
  overflow-y: auto;
}
.fx-search-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-base-content);
  text-decoration: none;
}
.fx-search-item:hover {
  background-color: var(--chip-muted-bg);
  color: var(--color-base-content);
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Shell: flash message container (FlyonUI alerts, populated by api.js)
   --------------------------------------------------------------------------- */
.fx-flash-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.fx-flash-container:empty { display: none; }
.fx-alert { align-items: center; }
.fx-alert-message { flex: 1 1 auto; }
.fx-alert-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}
.fx-alert-close:hover { opacity: 1; background: color-mix(in oklab, currentColor 15%, transparent); }
.fx-alert-closing { opacity: 0; transition: opacity 0.2s ease; }

/* ---------------------------------------------------------------------------
   FlyonUI Modal Bridge: Ensure legacy and dynamic modals work seamlessly
   --------------------------------------------------------------------------- */
.modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 1000 !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 1rem !important;
}

.modal:not(.active):not(.open):not([open]) {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.modal.active,
.modal.open,
.modal[open] {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  z-index: 1050 !important;
}

.modal-content {
  background-color: var(--color-base-100) !important;
  color: var(--color-base-content) !important;
  border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent) !important;
  border-radius: var(--radius-box, 0.75rem) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4) !important;
  pointer-events: auto !important;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent) !important;
}

.modal-header h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-base-content);
  margin: 0;
}

.modal-close {
  background: transparent;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--text-faint);
  line-height: 1;
  transition: color 0.15s ease;
}

.modal-close:hover {
  color: var(--color-base-content);
}

.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent) !important;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* ---------------------------------------------------------------------------
   SweetAlert2: FlyonUI Semantic Design System Integration
   Theme-aware popups (corporate, dark, synthwave, luxury)
   --------------------------------------------------------------------------- */
.swal2-container {
  z-index: 2000 !important;
  backdrop-filter: blur(4px) !important;
  background-color: rgba(0, 0, 0, 0.55) !important;
}

.swal2-popup.swal2-modal {
  background-color: var(--color-base-100) !important;
  color: var(--color-base-content) !important;
  border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent) !important;
  border-radius: var(--radius-box, 0.75rem) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45) !important;
  padding: 1.75rem !important;
  font-family: inherit !important;
}

.swal2-title {
  color: var(--color-base-content) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  padding: 0.5rem 0 0 0 !important;
}

.swal2-html-container {
  color: color-mix(in oklab, var(--color-base-content) 75%, transparent) !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  margin: 0.75rem 0 0 0 !important;
}

.swal2-actions {
  gap: 0.625rem !important;
  margin-top: 1.5rem !important;
  width: 100% !important;
  justify-content: flex-end !important;
}

/* Base button styles */
.swal2-styled {
  font-family: inherit !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  border-radius: var(--radius-field, 0.375rem) !important;
  padding: 0.5rem 1rem !important;
  box-shadow: none !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.swal2-styled:focus {
  box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-primary) !important;
}

/* Confirm button defaults to primary / error */
.swal2-confirm.swal2-styled {
  background-color: var(--color-primary) !important;
  color: var(--color-primary-content) !important;
}

.swal2-confirm.swal2-styled:hover {
  filter: brightness(0.92);
}

/* When confirm button is for danger / delete */
.swal2-icon-warning ~ .swal2-actions .swal2-confirm,
.swal2-icon-error ~ .swal2-actions .swal2-confirm,
.swal2-confirm.swal2-danger,
.swal2-styled[style*="220, 53, 69"],
.swal2-styled[style*="#dc3545"] {
  background-color: var(--color-error) !important;
  color: var(--color-error-content) !important;
}

/* Cancel button */
.swal2-cancel.swal2-styled {
  background-color: var(--chip-muted-bg) !important;
  color: var(--color-base-content) !important;
  border-color: var(--chip-muted-border) !important;
}

.swal2-cancel.swal2-styled:hover {
  background-color: var(--chip-muted-bg) !important;
}

/* Deny button */
.swal2-deny.swal2-styled {
  background-color: var(--chip-muted-bg) !important;
  color: var(--color-base-content) !important;
}

/* SweetAlert2 Icons */
.swal2-icon {
  margin: 0.5rem auto 1rem !important;
}

.swal2-icon.swal2-warning {
  border-color: var(--color-warning) !important;
  color: var(--color-warning) !important;
}

.swal2-icon.swal2-error {
  border-color: var(--color-error) !important;
  color: var(--color-error) !important;
}
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
  background-color: var(--color-error) !important;
}

.swal2-icon.swal2-success {
  border-color: var(--color-success) !important;
  color: var(--color-success) !important;
}
.swal2-icon.swal2-success [class^='swal2-success-line'] {
  background-color: var(--color-success) !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: color-mix(in oklab, var(--color-success) 30%, transparent) !important;
}

.swal2-icon.swal2-info {
  border-color: var(--color-info) !important;
  color: var(--color-info) !important;
}

.swal2-icon.swal2-question {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}