/* ============ КОСМИЧЕСКАЯ ТЕМА MAIL.XSAITE.RU ============
   Фон-космос, неоновая бирюза, полупрозрачные панели. */

/* --- Тёмная тема (основная) --- */
html.dark-mode {
  /* Космический фон через градиенты */
  background: radial-gradient(120% 90% at 15% 5%, #072a33 0%, transparent 55%),
              radial-gradient(110% 80% at 95% 90%, #0a2a33 0%, transparent 55%),
              linear-gradient(180deg, #04080f 0%, #060b14 60%, #030610 100%) !important;
  background-attachment: fixed !important;
}

html.dark-mode body,
html.dark-mode #layout,
html.dark-mode .ui-widget,
html.dark-mode .popup, 
html.dark-mode .dialog {
  background: transparent !important;
}

/* Строковый фоновый фон: звёзды */
body {
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1px 1px at 30px 40px, rgba(180,255,235,.9), transparent),
    radial-gradient(1px 1px at 150px 120px, rgba(160,240,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 280px 200px, rgba(200,255,245,.8), transparent),
    radial-gradient(1px 1px at 380px 80px, rgba(190,230,255,.7), transparent),
    radial-gradient(1px 1px at 90px 300px, rgba(220,255,245,.6), transparent);
  background-repeat: repeat;
  background-size: 420px 320px;
  opacity: .5;
}

/* --- Акцентный цвет: неоновая бирюза --- */
html.dark-mode {
  --main-color: #2dd4bf;          /* бирюза */
  --main-color-hover: #14b8a6;
  --primary: #2dd4bf;
  --color-primary: #2dd4bf;
  --button-bg-primary: #0f766e;
  --input-border: rgba(45,212,191,.4);
  --link-color: #34e6d0;
  --focus-ring: rgba(45,212,191,.4);
  --selected-bg: rgba(45,212,191,.18);
  --hover-bg: rgba(45,212,191,.10);
}

/* --- Логотип и заголовок --- */
html.dark-mode #logo {
  filter: drop-shadow(0 0 12px rgba(45,212,191,.45));
}
html.dark-mode .logo,
html.dark-mode h1,
html.dark-mode .title {
  color: #c7fff4;
}

/* --- Панели и карточки (полупрозрачные со стеклом) --- */
html.dark-mode #layout-content,
html.dark-mode .content,
html.dark-mode .listing,
html.dark-mode .message,
html.dark-mode .sidebar,
html.dark-mode .menubar,
html.dark-mode .toolbar,
html.dark-mode .table,
html.dark-mode .boxcontent,
html.dark-mode .popup-content,
html.dark-mode .ui-dialog {
  background: rgba(8, 16, 24, .72) !important;
  backdrop-filter: blur(8px);
  border-color: rgba(45,212,191,.15) !important;
}

/* --- Кнопки --- */
html.dark-mode button,
html.dark-mode .button,
html.dark-mode .btn,
html.dark-mode input[type=submit] {
  background: rgba(15, 118, 110, .25) !important;
  border-color: var(--main-color, #2dd4bf) !important;
  color: #d5fff8 !important;
  border-radius: 6px !important;
  transition: all .2s;
}
html.dark-mode button:hover,
html.dark-mode .button:hover,
html.dark-mode .btn:hover {
  background: var(--main-color, #2dd4bf) !important;
  color: #04110e !important;
  box-shadow: 0 0 14px rgba(45,212,191,.5);
}

/* --- Поля ввода --- */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
  background: rgba(0, 0, 0, .4) !important;
  border-color: var(--input-border) !important;
  color: #e2fff9 !important;
  border-radius: 6px !important;
}
html.dark-mode input:focus,
html.dark-mode textarea:focus {
  border-color: var(--main-color, #2dd4bf) !important;
  box-shadow: 0 0 10px rgba(45,212,191,.4);
}

/* --- Ссылки --- */
html.dark-mode a,
html.dark-mode a:visited {
  color: var(--link-color, #34e6d0);
}

/* --- Заголовки таблиц/разделов --- */
html.dark-mode th,
html.dark-mode .boxtitle,
html.dark-mode .listbox-title {
  color: #9ff5e8 !important;
}

/* --- Скроллбар --- */
html.dark-mode.react::-webkit-scrollbar,
html.dark-mode *::-webkit-scrollbar {
  width: 10px; height: 10px;
}
html.dark-mode *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2dd4bf, #0f766e);
  border-radius: 10px;
}
html.dark-mode *::-webkit-scrollbar-track {
  background: rgba(0,0,0,.3);
}

/* --- Входная страница --- */
html.dark-mode.iframe-wrap #layout {
  background: transparent !important;
}