/* onyx/static/css/base.css */
/* ═══ Reset & Base ═══ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  height: 100vh;
  overflow: hidden;
}

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 5px;
  transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
/* Firefox scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--border-subtle) transparent; }

/* ═══ Selection ═══ */
::selection {
  background: rgba(124,92,191,0.35);
  color: var(--text-primary);
}
[data-theme="light"] ::selection {
  background: rgba(122,104,152,0.25);
  color: var(--text-primary);
}

/* ═══ Cursor Spotlight ═══ */
#cursor-spotlight {
  position: fixed;
  top: 0; left: 0;
  width: 250px; height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
  mix-blend-mode: screen;
  will-change: transform;
  transition: opacity 0.3s;
}
[data-theme="light"] #cursor-spotlight {
  background: radial-gradient(circle, rgba(122,104,152,0.04) 0%, transparent 70%);
  mix-blend-mode: multiply;
  opacity: 0.3;
}

/* ═══ View Transitions (theme toggle) ═══ */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
/* OLD stays underneath */
::view-transition-old(root) {
  z-index: 1;
}
/* NEW expands on top via clip-path animated by JS */
::view-transition-new(root) {
  z-index: 2147483647; /* max int — above ALL named groups */
}

/* During theme toggle, suppress named view-transition groups
   so they don't poke through the expanding clip-path circle */
html.theme-transitioning #workspace,
html.theme-transitioning .nav-item.active::before {
  view-transition-name: none !important;
}

/* ═══ Global checkbox ═══ */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px; height: 14px; flex-shrink: 0;
  border: 1.5px solid var(--border-default);
  border-radius: 4px;
  background: var(--bg-deep);
  cursor: pointer;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
  margin: 0;
  vertical-align: middle;
}
input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1.5px;
  width: 4px; height: 8px;
  border: 1.5px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg);
}
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 1px;
}
input[type="checkbox"]:hover:not(:checked) {
  border-color: var(--accent);
}
/* Switch hides its checkbox entirely — reset size so it doesn't take space */
.switch input[type="checkbox"] {
  width: 0; height: 0;
  border: none; background: none;
}

/* ═══ Typography ═══ */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-faint { color: var(--text-faint); }
.text-accent { color: var(--accent-text); }
.text-success { color: var(--success); }
.text-error { color: var(--error); }
.text-warning { color: var(--warning); }
.text-info { color: var(--info); }

.mono { font-family: var(--font-mono); }
.font-bold { font-weight: 600; }
.text-xs { font-size: 8px; }
.text-sm { font-size: 10px; }
.text-md { font-size: 12px; }
.text-lg { font-size: 14px; }
.text-xl { font-size: 18px; }
.text-2xl { font-size: 24px; }
.uppercase { text-transform: uppercase; letter-spacing: 0.4px; }

/* ═══ Phase B — perceived perf ═══
   content-visibility: auto выключает layout/paint для offscreen элементов.
   Браузер считает intrinsic-size из contain-intrinsic-size placeholder'а,
   а реальное содержимое считается/рисуется только когда row попадает
   в viewport (~100px margin). Эффект драматичный на длинных списках:
   для 500+ строк Credentials/Hosts первый paint в 3-5x быстрее.

   Placeholder-высоты подобраны под реальные высоты rows — чтобы не было
   layout-jump при скролле и чтобы scrollbar корректно отражал total
   height. Слишком маленькое значение → после разворачивания контент
   "прыгает", слишком большое → лишний whitespace внизу. */

.host-row {
  content-visibility: auto;
  contain-intrinsic-size: 0 34px;
}

.cred-row {
  content-visibility: auto;
  contain-intrinsic-size: 0 44px;
}

.log-row {
  content-visibility: auto;
  contain-intrinsic-size: 0 22px;
}

.host-card {
  content-visibility: auto;
  contain-intrinsic-size: 220px 160px;
}