/* Общий дизайн всех проектов Preventage — https://preventage.pro/ui.css
 *
 * Подключение (в <head>, до стилей проекта):
 *   <link rel="stylesheet" href="https://preventage.pro/ui.css">
 *
 * 1. Токены --pv-* — единственный источник цветов, шрифтов, скруглений и теней.
 *    Проекты не пишут цвета числами, а берут их отсюда: var(--pv-text), var(--pv-accent)…
 *    Свои переменные проекта — только как ссылки: --bg: var(--pv-bg, #f5f5f7) (второе — запасное значение).
 * 2. Компоненты .pv-* — кнопки, переключатели, поля, карточки, таблицы. Используются по желанию.
 *
 * Стиль — macOS: системные цвета Apple, шрифт SF, светлая и тёмная тема (по настройке системы;
 * атрибут data-theme="light|dark" на <html> её переопределяет).
 * Файл отдаётся без кеша: правка здесь видна на всех поддоменах сразу после выкладки портала.
 */

:root {
  /* поверхности */
  --pv-bg: #f5f5f7;                        /* фон страницы */
  --pv-surface: #ffffff;                   /* карточки, окна, таблицы */
  --pv-surface-2: #f6f6f8;                 /* панели инструментов, боковые панели, шапки таблиц */
  --pv-fill: rgba(118, 118, 128, .12);     /* фон кнопок, переключателей */
  --pv-fill-2: rgba(118, 118, 128, .2);    /* наведение */
  --pv-control: #ffffff;                   /* поля ввода */
  --pv-seg-on: #ffffff;                    /* выбранный пункт переключателя */
  /* текст */
  --pv-text: #1d1d1f;
  --pv-text-2: #6e6e73;                    /* второстепенный */
  --pv-text-3: #aeaeb2;                    /* подсказки, неактивное */
  /* линии */
  --pv-line: #e5e5ea;
  --pv-line-2: #d2d2d7;                    /* рамки полей, разделители групп */
  /* системные цвета Apple */
  --pv-blue: #007aff;
  --pv-green: #34c759;
  --pv-red: #ff3b30;
  --pv-orange: #ff9500;
  --pv-yellow: #ffcc00;
  --pv-purple: #af52de;
  --pv-pink: #ff2d55;
  --pv-teal: #30b0c7;
  --pv-gray: #8e8e93;
  --pv-accent: var(--pv-blue);             /* акцент: ссылки, выбранное, главные кнопки */
  --pv-accent-soft: rgba(0, 122, 255, .14);
  --pv-good: #248a3d;                      /* текст «хорошо» (плюс, успех) */
  --pv-bad: #d70015;                       /* текст «плохо» (минус, ошибка) */
  --pv-warn-bg: #fff4e0;
  --pv-warn: #9a5a00;
  /* шрифт */
  --pv-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --pv-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --pv-fs: 13px;                           /* основной размер текста */
  --pv-fs-sm: 11px;                        /* подписи */
  /* форма */
  --pv-r-sm: 6px;                          /* кнопки, поля */
  --pv-r: 10px;                            /* карточки, таблицы */
  --pv-r-lg: 12px;                         /* окна */
  --pv-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 .5px rgba(0, 0, 0, .06);
  --pv-shadow-pop: 0 10px 30px rgba(0, 0, 0, .18);
  --pv-shadow-window: 0 20px 50px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .18);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pv-bg: #141416; --pv-surface: #1e1e20; --pv-surface-2: #2a2a2d;
    --pv-fill: rgba(118, 118, 128, .24); --pv-fill-2: rgba(118, 118, 128, .36); --pv-control: #3a3a3d; --pv-seg-on: #636366;
    --pv-text: #f5f5f7; --pv-text-2: #98989d; --pv-text-3: #636366;
    --pv-line: #38383b; --pv-line-2: #4a4a4e;
    --pv-blue: #0a84ff; --pv-green: #30d158; --pv-red: #ff453a; --pv-orange: #ff9f0a; --pv-yellow: #ffd60a;
    --pv-purple: #bf5af2; --pv-pink: #ff375f; --pv-teal: #40c8e0; --pv-gray: #8e8e93;
    --pv-accent-soft: rgba(10, 132, 255, .22); --pv-good: #30d158; --pv-bad: #ff6961;
    --pv-warn-bg: #3a2c12; --pv-warn: #ffb340;
    --pv-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 0 0 .5px rgba(255, 255, 255, .08);
    --pv-shadow-pop: 0 10px 30px rgba(0, 0, 0, .5);
    --pv-shadow-window: 0 20px 50px rgba(0, 0, 0, .6), 0 0 0 .5px rgba(255, 255, 255, .12);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --pv-bg: #141416; --pv-surface: #1e1e20; --pv-surface-2: #2a2a2d;
  --pv-fill: rgba(118, 118, 128, .24); --pv-fill-2: rgba(118, 118, 128, .36); --pv-control: #3a3a3d; --pv-seg-on: #636366;
  --pv-text: #f5f5f7; --pv-text-2: #98989d; --pv-text-3: #636366;
  --pv-line: #38383b; --pv-line-2: #4a4a4e;
  --pv-blue: #0a84ff; --pv-green: #30d158; --pv-red: #ff453a; --pv-orange: #ff9f0a; --pv-yellow: #ffd60a;
  --pv-purple: #bf5af2; --pv-pink: #ff375f; --pv-teal: #40c8e0; --pv-gray: #8e8e93;
  --pv-accent-soft: rgba(10, 132, 255, .22); --pv-good: #30d158; --pv-bad: #ff6961;
  --pv-warn-bg: #3a2c12; --pv-warn: #ffb340;
  --pv-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 0 0 .5px rgba(255, 255, 255, .08);
  --pv-shadow-pop: 0 10px 30px rgba(0, 0, 0, .5);
  --pv-shadow-window: 0 20px 50px rgba(0, 0, 0, .6), 0 0 0 .5px rgba(255, 255, 255, .12);
  color-scheme: dark;
}

/* ---------- компоненты (по желанию: класс pv-…) ---------- */

/* Кнопка: .pv-btn, главная — .pv-btn.primary, опасная — .pv-btn.danger */
.pv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 28px; padding: 4px 12px; border: 0; border-radius: var(--pv-r-sm);
  background: var(--pv-fill); color: var(--pv-text); font: 500 var(--pv-fs) var(--pv-font);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.pv-btn:hover { background: var(--pv-fill-2); }
.pv-btn.primary { background: var(--pv-accent); color: #fff; }
.pv-btn.primary:hover { filter: brightness(1.08); }
.pv-btn.danger { background: transparent; color: var(--pv-red); }
.pv-btn:disabled { opacity: .45; cursor: default; }

/* Сегментированный переключатель: .pv-seg > button[aria-pressed="true"] */
.pv-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: 8px; background: var(--pv-fill); }
.pv-seg > button {
  border: 0; border-radius: var(--pv-r-sm); padding: 4px 11px; background: transparent;
  color: var(--pv-text); font: 500 12px var(--pv-font); cursor: pointer;
}
.pv-seg > button[aria-pressed="true"] { background: var(--pv-seg-on); box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 0 0 .5px rgba(0, 0, 0, .06); }
.pv-seg > button:hover:not([aria-pressed="true"]) { background: var(--pv-accent-soft); }

/* Поле ввода и список: .pv-input */
.pv-input {
  font: var(--pv-fs) var(--pv-font); color: var(--pv-text); background: var(--pv-control);
  border: 1px solid var(--pv-line-2); border-radius: var(--pv-r-sm); padding: 4px 8px;
}
.pv-input:focus { outline: 3px solid var(--pv-accent-soft); border-color: var(--pv-accent); }

/* Карточка и плитка с числом: .pv-card, .pv-tile > span (подпись) + b (число) */
.pv-card { background: var(--pv-surface); border-radius: var(--pv-r); box-shadow: var(--pv-shadow); }
.pv-tile { border: 1px solid var(--pv-line); border-radius: var(--pv-r); padding: 12px 14px; background: var(--pv-surface); }
.pv-tile > span { display: block; font-size: var(--pv-fs-sm); color: var(--pv-text-2); text-transform: uppercase; letter-spacing: .05em; }
.pv-tile > b { display: block; margin-top: 4px; font: 600 26px/1.2 var(--pv-font-display); font-variant-numeric: tabular-nums; }

/* Метка: .pv-chip */
.pv-chip { display: inline-block; padding: 1px 7px; border-radius: 5px; background: var(--pv-fill); font-size: var(--pv-fs-sm); white-space: nowrap; }

/* Таблица: .pv-table — все столбцы по центру, кроме первого (общее правило) */
.pv-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pv-table th { font: 600 var(--pv-fs-sm) var(--pv-font); color: var(--pv-text-2); padding: 7px 12px; border-bottom: 1px solid var(--pv-line); white-space: nowrap; }
.pv-table td { padding: 6px 12px; border-bottom: 1px solid var(--pv-line); }
.pv-table th, .pv-table td { text-align: center; }
.pv-table tr > :first-child { text-align: left; }
.pv-table tbody tr:nth-child(even) { background: var(--pv-surface-2); }
.pv-table tfoot td { font-weight: 600; border-bottom: 0; }
.pv-table-wrap { border: 1px solid var(--pv-line); border-radius: var(--pv-r); overflow-x: auto; max-width: 100%; background: var(--pv-surface); }