/* Enceladus — тема Vikunja для Q-Rider
   Источник: vault/sakuto assistant/09 Интерфейсы/Оформление сайта.md
   ТАБУ: пять цветов. #FF9F1C — кольцо на заднике и сигнал «нужно серьёзное внимание» (просрочено, ошибка).
   Новый цвет не заводить: нужен промежуточный оттенок — середина между соседями.
   Подключается nginx-ом (sub_filter) перед </head>, файлы в /opt/vikunja/theme на сервере. */

:root, :root.dark {
  --c-bg: #000000;
  --c-line: #23292F;
  --c-muted: #AEB7BF;
  --c-text: #FFFFFF;
  --c-cryo: #4DDCFF;
  --c-ring: #FF9F1C;
  --c-glass: rgba(0, 0, 0, 0.55);  /* тот же чёрный с прозрачностью — подложка, как в теме Obsidian */

  /* шкала серого Vikunja схлопнута на пять цветов */
  --grey-50-hsl: 0, 0%, 0%;           --grey-50: var(--c-bg);
  --grey-100-hsl: 210, 14.6%, 16.1%;  --grey-100: var(--c-line);
  --grey-200: var(--c-line);
  --grey-300: var(--c-muted);
  --grey-400: var(--c-muted);
  --grey-500-hsl: 208, 10%, 71.6%;    --grey-500: var(--c-muted);
  --grey-600: var(--c-text);
  --grey-700: var(--c-text);
  --grey-800: var(--c-text);
  --grey-900-hsl: 0, 0%, 100%;        --grey-900: var(--c-text);

  --white: var(--c-glass);
  --white-translucent: var(--c-glass);
  --black-l: 100%;
  --site-background: transparent;
  --scheme-main: var(--c-bg);
  --scheme-main-bis: var(--c-line);
  --scheme-main-ter: var(--c-line);
  --scheme-invert: var(--c-text);
  --scheme-invert-bis: var(--c-text);
  --scheme-invert-ter: var(--c-text);
  --scheme-invert-rgb: 255, 255, 255;
  --background: var(--c-line);
  --border: var(--c-line);
  --border-hover: var(--c-muted);

  --text: var(--c-text);
  --text-strong: var(--c-text);
  --text-light: var(--c-muted);
  --text-muted: var(--c-muted);
  --text-invert: var(--c-bg);
  --logo-text-color: var(--c-text);
  --tag-color: var(--c-muted);
  --tag-background-color: transparent;
  --card-border-color: var(--c-line);
  --input-placeholder-color: rgba(174, 183, 191, 0.6);
  --pre-background: transparent;
  --code-background: transparent;
  --table-row-hover-background-color: rgba(35, 41, 47, 0.6);
  --dropdown-item-hover-background-color: var(--c-line);
  --dropdown-item-hover-color: var(--c-text);
  --button-text-hover-background-color: var(--c-line);
  --button-hover-color: var(--c-text);

  /* крио-голубой #4DDCFF = hsl(192, 100%, 65%) — всё важное */
  --primary-h: 192deg; --primary-s: 100%; --primary-l: 65%;
  --primary: var(--c-cryo);
  --primary-invert: var(--c-bg);
  --primary-light: transparent;
  --primary-dark: var(--c-text);
  --link: var(--c-cryo);
  --link-h: 192deg; --link-s: 100%; --link-l: 65%;
  --link-hover: var(--c-text);
  --link-invert: var(--c-bg);
  --info: var(--c-cryo);
  --success: var(--c-cryo);
  --switch-view-active-background: var(--c-cryo);

  /* оранжевый — только серьёзное внимание: просрочено, удаление, ошибка */
  --danger: var(--c-ring);
  --danger-h: 35deg; --danger-s: 100%; --danger-l: 55%;
  --danger-text: var(--c-ring);
  --danger-invert: var(--c-bg);
  --warning: var(--c-ring);
  --warning-invert: var(--c-bg);

  --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none;

  --family-primary: system-ui, -apple-system, "Segoe UI", sans-serif;
  --body-family: var(--family-primary);
  --title-family: Georgia, serif;
  --radius: 10px;
  --radius-small: 10px;
  --radius-large: 14px;
  --input-radius: 10px;
  --tag-radius: 10px;
  --menu-item-radius: 10px;

  color-scheme: dark;
}

/* ===== небо: кольцо + звёзды, неподвижно ===== */
html, body {
  background-color: var(--c-bg) !important;
  font-family: var(--family-primary);
}
body {
  background-image: url("/enceladus/sky-wide.svg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
}
@media (max-aspect-ratio: 5/7) {
  body { background-image: url("/enceladus/sky-tall.svg") !important; }
}
/* свой фон проекта (если загрузили) остаётся, но под чёрной вуалью — текст читается */
.app-container-background { filter: brightness(0.45); }

/* ===== заголовки — Georgia ===== */
h1, h2, h3, .title, .project-title, .modal-content .heading, .task-view .heading .title {
  font-family: Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: 0;
}

/* ===== панели: подложка-стекло и рамка, без теней ===== */
.navbar, .menu-container, .app-container, .app-content { background: transparent !important; }
.navbar { border-bottom: 1px solid var(--c-line); backdrop-filter: blur(6px); background: rgba(0, 0, 0, 0.6) !important; }
.menu-container { border-inline-end: 1px solid var(--c-line); backdrop-filter: blur(6px); background: rgba(0, 0, 0, 0.6) !important; }

.card, .box, .bucket, .task-view, .tasks.has-background, .project-card, .table, .content table,
.gantt-container, .kanban .bucket, .single-task, .list-view .tasks, .project-grid-item {
  background-color: var(--c-glass) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  backdrop-filter: blur(2px);
}
.card .card, .bucket .task, .tasks .task { border: none !important; backdrop-filter: none; }
.kanban .bucket .task.kanban-card, .kanban-card {
  background: rgba(0, 0, 0, 0.7) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.kanban-card:hover { border-color: var(--c-muted) !important; }
.card-header { box-shadow: none !important; border-bottom: 1px solid var(--c-line); }
.card-header-title { font-family: Georgia, serif; font-weight: 400 !important; }

/* всплывающее — чёрное, держит рамка */
.dropdown-content, .modal-content, .modal-dialog, .popup, .v-popper__inner, .datepicker-popup,
.flatpickr-calendar, .quick-actions, .notifications-list, .multiselect .search-results {
  background-color: var(--c-bg) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  color: var(--c-text) !important;
}
.modal-mask, .modal-background { background-color: rgba(0, 0, 0, 0.75) !important; }
.dark .v-popper--theme-tooltip .v-popper__inner { background: var(--c-bg) !important; color: var(--c-text) !important; }

/* ===== меню слева ===== */
.menu-label, .menu .menu-label, .task-section-title, .label, .table th {
  color: var(--c-cryo) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}
.menu-list a, .menu-list .list-menu-link, .menu-list .base-button { border-radius: 10px; color: var(--c-text); }
.menu-list a:hover, .menu-list .list-menu-link:hover { background: var(--c-line) !important; }
.menu-list a.router-link-exact-active, .menu-list .router-link-exact-active,
.menu-list a.is-active {
  background: transparent !important;
  color: var(--c-cryo) !important;
  box-shadow: inset 0 0 0 1px var(--c-cryo);
}

/* ===== кнопки: контур, не заливка ===== */
.button { border-radius: 10px !important; box-shadow: none !important; }
.button.is-primary, .button.is-primary:not(.is-outlined) {
  background: transparent !important;
  color: var(--c-cryo) !important;
  border: 1px solid var(--c-cryo) !important;
}
.button.is-primary:hover { background: rgba(77, 220, 255, 0.12) !important; }
.button.is-danger { background: transparent !important; color: var(--c-ring) !important; border: 1px solid var(--c-ring) !important; }
.button:not(.is-primary):not(.is-danger):not(.is-text) {
  background: transparent !important;
  border-color: var(--c-line) !important;
  color: var(--c-text) !important;
}
.button:not(.is-primary):not(.is-danger):hover { border-color: var(--c-muted) !important; }

/* ===== поля ввода ===== */
.input, .textarea, select, .select select, .multiselect .input-wrapper, .tiptap, .ProseMirror,
input[type="text"], input[type="password"], input[type="email"], input[type="search"] {
  background-color: transparent !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: var(--c-text) !important;
}
.input:focus, .textarea:focus, select:focus, .tiptap:focus-within, input:focus {
  border-color: var(--c-cryo) !important;
  box-shadow: none !important;
}

/* ===== задачи ===== */
.task:hover, .single-task:hover { background: rgba(35, 41, 47, 0.6) !important; }
.task.is-done .tasktext, .is-done .task-title { color: var(--c-muted) !important; }
.is-done-badge, .is-done { --primary: var(--c-muted); }
.due-date.overdue, .is-overdue, .overdue { color: var(--c-ring) !important; }
.priority-label.high, .priority-label.urgent, .priority-label.do-now,
.high-priority { color: var(--c-ring) !important; }

/* правило внимания: важное — голубым, 500, чуть крупнее */
.content strong, .tiptap strong, .ProseMirror strong { color: var(--c-cryo); font-weight: 500; font-size: 1.04em; }
.content a, .tiptap a { color: var(--c-text) !important; text-decoration: underline; text-decoration-color: rgba(77, 220, 255, 0.55); text-underline-offset: 3px; }

/* чекбоксы и переключатели — голубые */
input[type="checkbox"] { accent-color: var(--c-cryo); }
.fancy-checkbox .checkbox-icon, .fancycheckbox svg { color: var(--c-cryo); }

/* код и цитаты — рамка */
pre, code { background: transparent !important; border: 1px solid var(--c-line); border-radius: 10px; color: var(--c-text) !important; }
pre code { border: none; }
blockquote { border-left: 2px solid var(--c-line) !important; background: transparent !important; }

/* выделение */
::selection { background: rgba(77, 220, 255, 0.25); }

/* полосы прокрутки */
* { scrollbar-color: var(--c-line) transparent; scrollbar-width: thin; }

/* ===== логотип: Р1 вместо Vikunja ===== */
.logo { visibility: hidden; position: relative; }
.logo-link, .logo-link * { }
.logo-link { position: relative; }
.logo-link::after {
  content: "EMP";
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 10px;
  padding-left: 46px;
  font-family: Georgia, serif; font-size: 22px; color: var(--c-text);
  background: url("/enceladus/icon.svg") left center / 36px 36px no-repeat;
  pointer-events: none;
}

/* страница входа */
.no-auth-wrapper, .noauth-container { background: transparent !important; }
.no-auth-wrapper .noauth-container, .noauth-container > section {
  background: var(--c-glass) !important;
  border: 1px solid var(--c-line);
  border-radius: 14px;
  box-shadow: none !important;
}