/* ============================================================
   Omega Steam-Trader — Design System
   A complete, self-contained stylesheet replacing Tailwind CDN.
   ============================================================ */

/* -------------------------------------------------------
   1. DESIGN TOKENS (CSS Custom Properties)
   ------------------------------------------------------- */
:root {
  /* --- Colors: Neutral (dark-first) --- */
  --c-gray-50:  #f9fafb;
  --c-gray-100: #f3f4f6;
  --c-gray-200: #e5e7eb;
  --c-gray-300: #d1d5db;
  --c-gray-400: #9ca3af;
  --c-gray-500: #6b7280;
  --c-gray-600: #4b5563;
  --c-gray-700: #374151;
  --c-gray-800: #1f2937;
  --c-gray-900: #111827;
  --c-gray-950: #0a0e1a;

  /* --- Colors: Brand / Emerald --- */
  --c-brand-50:  #ecfdf5;
  --c-brand-100: #d1fae5;
  --c-brand-400: #34d399;
  --c-brand-500: #10b981;
  --c-brand-600: #059669;
  --c-brand-700: #047857;
  --c-brand-900: #064e3b;

  /* --- Colors: Semantic --- */
  --c-rose-400:  #fb7185;
  --c-rose-500:  #f43f5e;
  --c-rose-600:  #e11d48;
  --c-rose-900:  #881337;
  --c-amber-400: #fbbf24;
  --c-amber-500: #f59e0b;
  --c-blue-400:  #60a5fa;
  --c-blue-500:  #3b82f6;
  --c-cyan-400:  #22d3ee;
  --c-indigo-500:#6366f1;
  --c-indigo-600:#4f46e5;

  /* --- Surface & Background --- */
  --bg-body:     #0b0f19;
  --bg-surface:  rgba(17, 24, 39, 0.60); /* gray-900/60 */
  --bg-raised:   var(--c-gray-900);
  --bg-input:    var(--c-gray-950);
  --bg-overlay:  rgba(0, 0, 0, 0.70);

  /* --- Typography --- */
  --ff-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
             "Liberation Mono", monospace;

  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-lg:   1.125rem;  /* 18px */
  --fs-xl:   1.25rem;   /* 20px */
  --fs-2xl:  1.5rem;    /* 24px */

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight: 1.25;
  --lh-normal: 1.5;

  /* --- Spacing scale (4px base) --- */
  --sp-0:   0;
  --sp-0-5: 0.125rem;  /* 2px */
  --sp-1:   0.25rem;   /* 4px */
  --sp-1-5: 0.375rem;  /* 6px */
  --sp-2:   0.5rem;    /* 8px */
  --sp-2-5: 0.625rem;  /* 10px */
  --sp-3:   0.75rem;   /* 12px */
  --sp-3-5: 0.875rem;  /* 14px */
  --sp-4:   1rem;      /* 16px */
  --sp-5:   1.25rem;   /* 20px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-8:   2rem;      /* 32px */

  /* --- Border Radius --- */
  --radius-sm:  0.375rem;
  --radius-md:  0.5rem;
  --radius-lg:  0.625rem;
  --radius-xl:  0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  /* --- Focus Ring --- */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--c-brand-500);

  /* --- Shadows --- */
  --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* --- Transitions --- */
  --transition-fast:   150ms ease;
  --transition-normal: 200ms ease;
}


/* -------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background-color: var(--bg-body);
  color: var(--c-gray-100);
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video, iframe {
  display: block;
  max-width: 100%;
}

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* -------------------------------------------------------
   3. FOCUS & ACCESSIBILITY
   ------------------------------------------------------- */

/* Visible focus ring for keyboard navigation only */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* Remove outline on mouse clicks */
:focus:not(:focus-visible) {
  outline: none;
}

/* Skip link (added in HTML) */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-brand-600);
  color: white;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-md);
  transition: top var(--transition-fast);
}
.skip-link:focus {
  top: var(--sp-4);
}

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/* -------------------------------------------------------
   4. REDUCED MOTION
   ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* -------------------------------------------------------
   5. LAYOUT UTILITIES
   ------------------------------------------------------- */
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.flex-1        { flex: 1 1 0%; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.shrink-0      { flex-shrink: 0; }

.hidden { display: none !important; }

.w-full    { width: 100%; }
.max-w-md  { max-width: 28rem; }
.max-w-sm  { max-width: 24rem; }

.container {
  width: 100%;
  max-width: 80rem; /* 1280px */
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }


/* -------------------------------------------------------
   6. SPACING UTILITIES
   ------------------------------------------------------- */
.gap-2   { gap: var(--sp-2); }
.gap-3   { gap: var(--sp-3); }
.gap-4   { gap: var(--sp-4); }
.gap-6   { gap: var(--sp-6); }

.space-y-1-5 > * + * { margin-top: var(--sp-1-5); }
.space-y-3   > * + * { margin-top: var(--sp-3); }
.space-y-4   > * + * { margin-top: var(--sp-4); }
.space-y-6   > * + * { margin-top: var(--sp-6); }

.space-x-2 > * + * { margin-left: var(--sp-2); }
.space-x-3 > * + * { margin-left: var(--sp-3); }
.space-x-6 > * + * { margin-left: var(--sp-6); }

.p-3   { padding: var(--sp-3); }
.p-4   { padding: var(--sp-4); }
.p-6   { padding: var(--sp-6); }
.px-2-5 { padding-inline: var(--sp-2-5); }
.px-3  { padding-inline: var(--sp-3); }
.px-3-5 { padding-inline: var(--sp-3-5); }
.px-4  { padding-inline: var(--sp-4); }
.py-1  { padding-block: var(--sp-1); }
.py-1-5 { padding-block: var(--sp-1-5); }
.py-2  { padding-block: var(--sp-2); }
.py-2-5 { padding-block: var(--sp-2-5); }
.py-3  { padding-block: var(--sp-3); }
.py-8  { padding-block: var(--sp-8); }
.pt-2  { padding-top: var(--sp-2); }
.pt-5  { padding-top: var(--sp-5); }
.pb-3  { padding-bottom: var(--sp-3); }

.mt-1  { margin-top: var(--sp-1); }
.mt-6  { margin-top: var(--sp-6); }
.mb-1  { margin-bottom: var(--sp-1); }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-5  { margin-bottom: var(--sp-5); }
.mb-6  { margin-bottom: var(--sp-6); }
.-mt-1 { margin-top: -0.25rem; }


/* -------------------------------------------------------
   7. TYPOGRAPHY UTILITIES
   ------------------------------------------------------- */
.text-xs   { font-size: var(--fs-xs);   line-height: 1rem; }
.text-sm   { font-size: var(--fs-sm);   line-height: 1.25rem; }
.text-base { font-size: var(--fs-base);  line-height: var(--lh-normal); }
.text-lg   { font-size: var(--fs-lg);   line-height: 1.75rem; }
.text-xl   { font-size: var(--fs-xl);   line-height: 1.75rem; }
.text-2xl  { font-size: var(--fs-2xl);  line-height: 2rem; }

.font-normal   { font-weight: var(--fw-normal); }
.font-medium   { font-weight: var(--fw-medium); }
.font-semibold { font-weight: var(--fw-semibold); }
.font-bold     { font-weight: var(--fw-bold); }

.font-mono { font-family: var(--ff-mono); }

.tracking-tight  { letter-spacing: -0.025em; }
.tracking-wider  { letter-spacing: 0.05em; }
.uppercase       { text-transform: uppercase; }

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.whitespace-nowrap { white-space: nowrap; }


/* -------------------------------------------------------
   8. COLOR UTILITIES
   ------------------------------------------------------- */
/* Text colors */
.text-white      { color: #fff; }
.text-gray-100   { color: var(--c-gray-100); }
.text-gray-200   { color: var(--c-gray-200); }
.text-gray-300   { color: var(--c-gray-300); }
.text-gray-400   { color: var(--c-gray-400); }
.text-gray-500   { color: var(--c-gray-500); }
.text-gray-600   { color: var(--c-gray-600); }

.text-brand-400  { color: var(--c-brand-400); }
.text-emerald-400 { color: var(--c-brand-400); }
.text-rose-400   { color: var(--c-rose-400); }
.text-amber-400  { color: var(--c-amber-400); }
.text-blue-400   { color: var(--c-blue-400); }
.text-cyan-400   { color: var(--c-cyan-400); }

/* Background colors */
.bg-black     { background-color: #000; }
.bg-white     { background-color: #fff; }
.bg-body      { background-color: var(--bg-body); }
.bg-gray-700  { background-color: var(--c-gray-700); }
.bg-gray-800  { background-color: var(--c-gray-800); }
.bg-gray-900  { background-color: var(--c-gray-900); }
.bg-gray-950  { background-color: var(--c-gray-950); }

/* Border colors */
.border-gray-700 { border-color: var(--c-gray-700); }
.border-gray-800 { border-color: var(--c-gray-800); }
.border-brand-500 { border-color: var(--c-brand-500); }
.border-transparent { border-color: transparent; }


/* -------------------------------------------------------
   9. BORDER & DECORATION UTILITIES
   ------------------------------------------------------- */
.border       { border-width: 1px; border-style: solid; }
.border-b     { border-bottom-width: 1px; border-bottom-style: solid; }
.border-t     { border-top-width: 1px; border-top-style: solid; }
.border-b-2   { border-bottom-width: 2px; border-bottom-style: solid; }
.border-0     { border-width: 0; }

.rounded-sm   { border-radius: var(--radius-sm); }
.rounded      { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-2xl  { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

.shadow-sm  { box-shadow: var(--shadow-sm); }
.shadow-lg  { box-shadow: var(--shadow-lg); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }

.divide-y > * + * {
  border-top: 1px solid rgba(31, 41, 55, 0.60);
}


/* -------------------------------------------------------
   10. TRANSITION UTILITY
   ------------------------------------------------------- */
.transition {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-timing-function: ease;
  transition-duration: 200ms;
}


/* -------------------------------------------------------
   11. HEADER / TOP NAVIGATION
   ------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--c-gray-800);
  background-color: rgba(17, 24, 39, 0.80);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem; /* 64px */
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.site-header__logo {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background-color: rgba(16, 185, 129, 0.20);
  border: 1px solid rgba(16, 185, 129, 0.40);
  color: var(--c-brand-400);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
}

.site-header__title {
  font-weight: var(--fw-bold);
  letter-spacing: -0.025em;
  color: #fff;
  font-size: var(--fs-base);
}

.site-header__subtitle {
  font-size: var(--fs-xs);
  color: var(--c-gray-500);
  display: block;
  margin-top: -0.25rem;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}


/* -------------------------------------------------------
   12. STATUS BADGES
   ------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-2-5);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
  border: 1px solid;
}

.badge--default {
  background-color: var(--c-gray-800);
  color: var(--c-gray-400);
  border-color: var(--c-gray-700);
}

.badge--success {
  background-color: rgba(16, 185, 129, 0.20);
  color: var(--c-brand-400);
  border-color: rgba(16, 185, 129, 0.40);
}

.badge--warning {
  background-color: rgba(245, 158, 11, 0.20);
  color: var(--c-amber-400);
  border-color: rgba(245, 158, 11, 0.40);
}

.badge--info {
  background-color: rgba(59, 130, 246, 0.20);
  color: var(--c-blue-400);
  border-color: rgba(59, 130, 246, 0.40);
}

.badge--opportunity {
  background-color: rgba(16, 185, 129, 0.10);
  color: var(--c-brand-400);
  border-color: rgba(16, 185, 129, 0.30);
}


/* -------------------------------------------------------
   13. BUTTONS
   ------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-1-5) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-normal),
              background-color var(--transition-normal),
              border-color var(--transition-normal),
              box-shadow var(--transition-normal),
              transform var(--transition-fast);
}

.btn:active {
  transform: scale(0.98);
}

/* Primary (emerald) */
.btn--primary {
  padding-inline: var(--sp-4);
  background-color: var(--c-brand-600);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background-color: var(--c-brand-500);
}

/* Danger (rose) */
.btn--danger {
  padding-inline: var(--sp-4);
  background-color: var(--c-rose-600);
  color: #fff;
}
.btn--danger:hover {
  background-color: var(--c-rose-500);
}

/* Secondary (gray) */
.btn--secondary {
  background-color: var(--c-gray-800);
  color: var(--c-gray-200);
  border-color: var(--c-gray-700);
}
.btn--secondary:hover {
  background-color: var(--c-gray-700);
}

/* Ghost (very subtle) */
.btn--ghost {
  background-color: rgba(31, 41, 55, 0.60);
  color: var(--c-gray-400);
  border-color: var(--c-gray-800);
}
.btn--ghost:hover {
  background-color: rgba(136, 19, 55, 0.40);
  color: var(--c-rose-400);
  border-color: rgba(136, 19, 55, 0.40);
}

/* Accent (indigo — for Steam login) */
.btn--accent {
  background-color: var(--c-indigo-600);
  color: #fff;
}
.btn--accent:hover {
  background-color: var(--c-indigo-500);
}

/* Full-width variant */
.btn--full {
  width: 100%;
  padding-block: var(--sp-2-5);
  padding-inline: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  box-shadow: var(--shadow-lg), 0 0 0 0 rgba(6, 78, 59, 0.20);
}

/* Half-width (modal buttons) */
.btn--half {
  width: 50%;
  padding-block: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

/* Settings inline link-style */
.btn--link {
  padding: 0;
  background: none;
  border: none;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-brand-400);
  cursor: pointer;
}
.btn--link:hover {
  color: var(--c-brand-100);
}


/* -------------------------------------------------------
   14. METRIC CARDS
   ------------------------------------------------------- */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}

.metric-card {
  padding: var(--sp-4);
  border-radius: var(--radius-xl);
  background-color: var(--bg-surface);
  border: 1px solid var(--c-gray-800);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.metric-card__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-gray-400);
}

.metric-card__value {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: #fff;
  margin-top: var(--sp-1);
}

.metric-card__value--amber {
  color: var(--c-amber-400);
}

.metric-card__value--green {
  color: var(--c-brand-400);
}


/* -------------------------------------------------------
   15. TAB NAVIGATION
   ------------------------------------------------------- */
.tab-nav {
  display: flex;
  gap: var(--sp-6);
  border-bottom: 1px solid var(--c-gray-800);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tab-btn {
  padding-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  border-bottom: 2px solid transparent;
  color: var(--c-gray-400);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-normal), border-color var(--transition-normal);
}

.tab-btn:hover {
  color: var(--c-gray-200);
}

.tab-btn[aria-selected="true"],
.tab-btn--active {
  border-bottom-color: var(--c-brand-500);
  color: var(--c-brand-400);
}

.tab-content {
  /* visible by default; JS adds .hidden */
}


/* -------------------------------------------------------
   16. DATA TABLES
   ------------------------------------------------------- */
.data-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-xl);
  border: 1px solid var(--c-gray-800);
  background-color: rgba(17, 24, 39, 0.50);
}

.data-table {
  width: 100%;
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--c-gray-300);
}

.data-table thead {
  background-color: rgba(31, 41, 55, 0.60);
  border-bottom: 1px solid var(--c-gray-800);
}

.data-table th {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  color: var(--c-gray-400);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.data-table td {
  padding: var(--sp-3) var(--sp-4);
}

.data-table tbody tr {
  transition: background-color var(--transition-fast);
}

.data-table tbody tr:hover {
  background-color: rgba(31, 41, 55, 0.40);
}

.data-table tbody tr + tr {
  border-top: 1px solid rgba(31, 41, 55, 0.60);
}

/* Empty-state row */
.data-table__empty {
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  color: var(--c-gray-500);
}


/* -------------------------------------------------------
   17. VNC PANEL
   ------------------------------------------------------- */
.vnc-toolbar {
  padding: var(--sp-4);
  border-radius: var(--radius-xl);
  background-color: var(--c-gray-900);
  border: 1px solid var(--c-gray-800);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.vnc-frame-wrap {
  width: 100%;
  height: 650px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--c-gray-800);
  background-color: #000;
}

.vnc-frame-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}


/* -------------------------------------------------------
   18. LOG VIEWER
   ------------------------------------------------------- */
.log-viewer {
  padding: var(--sp-4);
  border-radius: var(--radius-xl);
  background-color: var(--c-gray-950);
  border: 1px solid var(--c-gray-800);
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  color: var(--c-gray-300);
  max-height: 500px;
  overflow-y: auto;
}

.log-viewer > * + * {
  margin-top: var(--sp-1-5);
}


/* -------------------------------------------------------
   19. MODALS
   ------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background-color: var(--bg-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

.modal-panel {
  background-color: var(--c-gray-900);
  border: 1px solid var(--c-gray-800);
  border-radius: var(--radius-2xl);
  max-width: 24rem;
  width: 100%;
  padding: var(--sp-6);
  box-shadow: var(--shadow-2xl);
}

.modal-panel__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: #fff;
  margin-bottom: var(--sp-1);
}

.modal-panel__desc {
  font-size: var(--fs-xs);
  color: var(--c-gray-400);
  margin-bottom: var(--sp-4);
}

.modal-actions {
  display: flex;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
}


/* -------------------------------------------------------
   20. FORM INPUTS
   ------------------------------------------------------- */
.form-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-gray-300);
  margin-bottom: var(--sp-1);
}

.form-input {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  background-color: var(--bg-input);
  border: 1px solid var(--c-gray-800);
  border-radius: var(--radius-lg);
  color: #fff;
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.form-input::placeholder {
  color: var(--c-gray-600);
}

.form-input:focus {
  outline: none;
  border-color: var(--c-brand-500);
  box-shadow: 0 0 0 1px var(--c-brand-500);
}

.form-input--login {
  padding: var(--sp-2-5) var(--sp-3-5);
}


/* -------------------------------------------------------
   21. TOAST NOTIFICATIONS
   ------------------------------------------------------- */
.toast {
  position: fixed;
  bottom: var(--sp-4);
  right: var(--sp-4);
  z-index: 60;
  padding: var(--sp-2-5) var(--sp-4);
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  box-shadow: var(--shadow-lg);
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.toast--success {
  background-color: var(--c-brand-600);
  color: #fff;
}

.toast--error {
  background-color: var(--c-rose-600);
  color: #fff;
}

.toast--info {
  background-color: var(--c-gray-800);
  color: var(--c-gray-200);
  border: 1px solid var(--c-gray-700);
}


/* -------------------------------------------------------
   22. LOGIN PAGE COMPONENTS
   ------------------------------------------------------- */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

.login-card {
  width: 100%;
  max-width: 28rem;
  background-color: rgba(17, 24, 39, 0.90);
  border: 1px solid var(--c-gray-800);
  border-radius: var(--radius-2xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-2xl);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.login-brand__logo {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  background-color: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.30);
  color: var(--c-brand-400);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
}

.login-brand__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: #fff;
  letter-spacing: -0.025em;
}

.login-brand__tagline {
  font-size: var(--fs-xs);
  color: var(--c-gray-400);
}

.alert-error {
  margin-bottom: var(--sp-5);
  padding: var(--sp-3);
  border-radius: var(--radius-lg);
  background-color: rgba(244, 63, 94, 0.10);
  border: 1px solid rgba(244, 63, 94, 0.30);
  color: var(--c-rose-400);
  font-size: var(--fs-xs);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.login-footer {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(31, 41, 55, 0.80);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--c-gray-500);
}


/* -------------------------------------------------------
   23. RESPONSIVE BREAKPOINTS (mobile-first)
   ------------------------------------------------------- */

/* >= 640px (sm) */
@media (min-width: 640px) {
  .container {
    padding-inline: var(--sp-6);
  }

  .site-header__title {
    font-size: var(--fs-lg);
  }

  .login-card {
    padding: var(--sp-8);
  }

  .metrics-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .metric-card__value {
    font-size: var(--fs-2xl);
  }
}

/* >= 1024px (lg) */
@media (min-width: 1024px) {
  .container {
    padding-inline: var(--sp-8);
  }
}

/* >= 1280px (xl) */
@media (min-width: 1280px) {
  .container {
    max-width: 80rem;
  }
}

/* Small screens — stack header actions */
@media (max-width: 639px) {
  .site-header__inner {
    height: auto;
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding-block: var(--sp-3);
  }

  .site-header__actions {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    gap: var(--sp-2);
  }

  .vnc-frame-wrap {
    height: 350px;
  }

  .vnc-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
}


/* -------------------------------------------------------
   24. PRINT STYLES (utility)
   ------------------------------------------------------- */
@media print {
  .site-header,
  .toast,
  .modal-backdrop {
    display: none !important;
  }
}