/* 24remotedesk — тёмный UI + плоская жёлтая сетка */

:root {
  --rd-page: #2a2438;
  --rd-page-deep: #1f1a2e;
  --rd-text: #f4f4f5;
  --rd-muted: #d4d4d8;
  --rd-grid: rgba(250, 204, 21, 0.42);
}

html {
  min-height: 100%;
  background-color: var(--rd-page) !important;
  color: var(--rd-text) !important;
}

body {
  margin: 0;
  min-height: 100%;
  position: relative;
  isolation: isolate;
  color: var(--rd-text) !important;
  background-color: var(--rd-page) !important;
  background-image:
    linear-gradient(var(--rd-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--rd-grid) 1px, transparent 1px),
    radial-gradient(ellipse 120% 70% at 50% 0%, rgba(124, 58, 237, 0.22), transparent 55%);
  background-size: 36px 36px, 36px 36px, 100% 100%;
  background-attachment: fixed;
  font-family: system-ui, "Segoe UI", Roboto, Ubuntu, sans-serif;
}

/* Пока не подключены — окно connect не перекрывается контейнером по z */
:root:not(.noVNC_connected) #noVNC_container {
  z-index: 0 !important;
  position: relative !important;
}

#noVNC_connect_anchor {
  position: fixed;
  z-index: 5;
}

/* Контейнер framebuffer — та же плоская сетка, что и страница */
#noVNC_container {
  position: relative;
  isolation: isolate;
  background-color: var(--rd-page-deep) !important;
  background-image:
    linear-gradient(var(--rd-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--rd-grid) 1px, transparent 1px) !important;
  background-size: 36px 36px, 36px 36px !important;
}

#noVNC_container > div {
  position: relative;
  z-index: 1;
}

/* Левая панель noVNC — контраст текста и логотипа */
#noVNC_control_bar {
  color: #fafafa !important;
}

#noVNC_control_bar .noVNC_logo {
  color: #fde047 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

#noVNC_control_bar .noVNC_logo span {
  color: #facc15 !important;
}

/* Окно «Подключение» */
#noVNC_connect_dlg.noVNC_open .noVNC_logo {
  background: rgba(45, 38, 62, 0.98) !important;
  color: #fde047 !important;
  border: 1px solid rgba(250, 204, 21, 0.55);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

#noVNC_connect_dlg.noVNC_open .noVNC_logo span {
  color: #fef08a !important;
}

#noVNC_connect_dlg.noVNC_open > div {
  background: linear-gradient(180deg, #4c445f 0%, #3d3552 100%) !important;
  border: 1px solid rgba(250, 204, 21, 0.45) !important;
  color: #fafafa !important;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.35) !important;
}

#noVNC_connect_button {
  background: linear-gradient(180deg, #facc15 0%, #eab308 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #1c1917 !important;
  font-weight: 600;
}

#noVNC_connect_button:hover {
  filter: brightness(1.06);
}

/* Строка статуса сверху */
#noVNC_status.noVNC_open {
  color: #fff !important;
}

/* ========= Оверлей «Подключение…» / переподключение ========= */
#noVNC_transition {
  background: rgba(18, 14, 30, 0.88) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#noVNC_transition_text {
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  color: #fde047 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  letter-spacing: 0.02em;
  margin-bottom: 1.25rem !important;
  padding: 0 1rem;
  text-align: center;
  max-width: 28rem;
}

#noVNC_transition .noVNC_spinner {
  margin-top: 1rem;
}

#noVNC_cancel_reconnect_button {
  margin-top: 0.5rem;
  padding: 0.5rem 1.25rem !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f4f4f5 !important;
  cursor: pointer;
}

#noVNC_cancel_reconnect_button:hover {
  background: rgba(255, 255, 255, 0.14) !important;
}

/* ========= Карточки: пароль + проверка сервера ========= */
.noVNC_connect_layer .noVNC_panel {
  max-width: min(420px, 94vw) !important;
  border-radius: 18px !important;
  padding: 22px 24px 20px !important;
  background: linear-gradient(160deg, #3f3755 0%, #2d2640 55%, #252038 100%) !important;
  border: 1px solid rgba(250, 204, 21, 0.38) !important;
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  color: #f4f4f5 !important;
}

.noVNC_connect_layer .noVNC_panel .noVNC_heading {
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.45) 0%, rgba(91, 33, 182, 0.35) 100%) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin: -6px -6px 16px -6px !important;
  font-size: 1.1rem !important;
  border: 1px solid rgba(196, 181, 253, 0.25);
}

.rd-dlg-hint,
.rd-dlg-text {
  font-size: 0.92rem !important;
  line-height: 1.45 !important;
  color: #d4d4d8 !important;
  margin: 0 0 14px 0 !important;
}

#noVNC_fingerprint_block {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace !important;
  font-size: 0.8rem !important;
  word-break: break-all !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  background: rgba(0, 0, 0, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #e4e4e7 !important;
  margin-bottom: 16px !important;
}

.noVNC_connect_layer .noVNC_panel label {
  display: block !important;
  color: #e4e4e7 !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  margin-bottom: 4px !important;
}

.noVNC_connect_layer .noVNC_panel input[type="text"],
.noVNC_connect_layer .noVNC_panel input[type="password"] {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 11px 14px !important;
  margin-bottom: 12px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: rgba(10, 8, 18, 0.65) !important;
  color: #fafafa !important;
  font-size: 1rem !important;
}

.noVNC_connect_layer .noVNC_panel input:focus {
  outline: none !important;
  border-color: rgba(250, 204, 21, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
}

.rd-dlg-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: flex-end !important;
  margin-top: 8px !important;
}

.rd-btn-primary {
  padding: 10px 20px !important;
  border-radius: 11px !important;
  font-weight: 600 !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  background: linear-gradient(180deg, #facc15 0%, #ca8a04 100%) !important;
  color: #1c1917 !important;
  cursor: pointer;
}

.rd-btn-primary:hover {
  filter: brightness(1.05);
}

.rd-btn-secondary {
  padding: 10px 18px !important;
  border-radius: 11px !important;
  font-weight: 600 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f4f4f5 !important;
  cursor: pointer;
}

.rd-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14) !important;
}

@media (prefers-reduced-motion: reduce) {
  body {
    background-image:
      linear-gradient(var(--rd-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--rd-grid) 1px, transparent 1px);
  }
}

/* --- Hit-test: framebuffer над пустым connect_anchor (иначе мышь «мёртвая») --- */
:root.noVNC_connected #noVNC_container {
  position: relative;
  z-index: 40;
}

:root.noVNC_connected #noVNC_connect_anchor {
  z-index: 2;
}

:root.noVNC_connected #noVNC_control_bar_anchor {
  z-index: 50;
}

/* Диалоги подключения/verify остаются поверх до установки noVNC_connected */
.noVNC_connect_layer {
  z-index: 60 !important;
}

/* После connect слой 60 остаётся ВЫШЕ кадра (40) — уводим ниже */
:root.noVNC_connected .noVNC_connect_layer {
  z-index: 1 !important;
}