/* Дизайн-система Праксиуса — токены цвета и базовые правила.
   Единый источник значений для всех Tailwind-страниц: /pwa/, /org/,
   /admin/, login.html. Значения сняты с приложения — docs/design-system.md.
   Менять только здесь.

   Формат «R G B» (без rgb()) нужен, чтобы работали модификаторы
   прозрачности Tailwind: bg-primary/10, border-outline-variant/60. */

:root {
  --px-primary: 0 169 214;
  --px-primary-container: 0 178 227;
  --px-on-primary: 255 255 255;
  --px-on-primary-container: 255 255 255;
  --px-on-primary-fixed: 0 39 51;
  --px-on-primary-fixed-variant: 0 104 138;
  --px-primary-fixed: 214 243 252;
  --px-primary-fixed-dim: 159 226 246;
  --px-inverse-primary: 111 220 247;
  --px-secondary: 47 110 143;
  --px-secondary-container: 214 243 252;
  --px-on-secondary: 255 255 255;
  --px-on-secondary-container: 11 61 82;
  --px-on-secondary-fixed: 0 39 51;
  --px-on-secondary-fixed-variant: 42 90 115;
  --px-secondary-fixed: 214 243 252;
  --px-secondary-fixed-dim: 159 226 246;
  --px-tertiary: 11 20 64;
  --px-tertiary-container: 232 237 247;
  --px-on-tertiary: 255 255 255;
  --px-on-tertiary-container: 11 20 64;
  --px-on-tertiary-fixed: 5 10 36;
  --px-on-tertiary-fixed-variant: 38 49 94;
  --px-tertiary-fixed: 232 237 247;
  --px-tertiary-fixed-dim: 196 207 230;
  --px-error: 186 26 26;
  --px-status-done: 16 185 129;         /* «завершил» */
  --px-status-warn: 245 158 11;         /* «требует внимания» */
  --px-error-container: 255 218 214;
  --px-on-error: 255 255 255;
  --px-on-error-container: 147 0 10;
  --px-surface: 245 250 253;
  --px-surface-dim: 221 231 238;
  --px-surface-bright: 255 255 255;
  --px-surface-variant: 227 234 242;
  --px-surface-tint: 0 169 214;
  --px-surface-container: 237 244 249;
  --px-surface-container-low: 242 248 252;
  --px-surface-container-high: 230 239 246;
  --px-surface-container-highest: 223 234 242;
  --px-surface-container-lowest: 255 255 255;
  --px-on-surface: 11 20 64;
  --px-on-surface-variant: 90 107 138;
  --px-on-background: 11 20 64;
  --px-background: 245 250 253;
  --px-outline: 138 153 181;
  --px-outline-variant: 220 229 239;
  --px-inverse-surface: 11 20 64;
  --px-inverse-on-surface: 234 246 251;
  --px-selected-tint: 238 250 255;
}

html.dark {
  --px-primary: 0 185 230;
  --px-primary-container: 0 185 230;
  --px-on-primary: 255 255 255;
  --px-on-primary-container: 255 255 255;
  --px-on-primary-fixed: 214 243 252;
  --px-on-primary-fixed-variant: 111 220 247;
  --px-primary-fixed: 0 17 39;
  --px-primary-fixed-dim: 11 58 82;
  --px-inverse-primary: 0 104 138;
  --px-secondary: 127 198 228;
  --px-secondary-container: 0 17 39;
  --px-on-secondary: 0 18 26;
  --px-on-secondary-container: 207 238 251;
  --px-on-secondary-fixed: 214 243 252;
  --px-on-secondary-fixed-variant: 159 226 246;
  --px-secondary-fixed: 0 17 39;
  --px-secondary-fixed-dim: 11 58 82;
  --px-tertiary: 207 224 255;
  --px-tertiary-container: 10 23 48;
  --px-on-tertiary: 0 18 26;
  --px-on-tertiary-container: 232 237 247;
  --px-on-tertiary-fixed: 232 237 247;
  --px-on-tertiary-fixed-variant: 196 207 230;
  --px-tertiary-fixed: 10 23 48;
  --px-tertiary-fixed-dim: 22 32 63;
  --px-error: 255 180 171;
  --px-error-container: 105 0 5;
  --px-on-error: 105 0 5;
  --px-on-error-container: 255 218 214;
  --px-surface: 0 3 14;
  --px-surface-dim: 0 3 14;
  --px-surface-bright: 2 17 41;
  --px-surface-variant: 14 36 56;
  --px-surface-tint: 0 185 230;
  --px-surface-container: 0 5 19;
  --px-surface-container-low: 0 5 19;
  --px-surface-container-high: 0 17 39;
  --px-surface-container-highest: 11 32 51;
  --px-surface-container-lowest: 1 10 26;
  --px-on-surface: 255 255 255;
  --px-on-surface-variant: 143 163 191;
  --px-on-background: 255 255 255;
  --px-background: 0 3 14;
  --px-outline: 74 95 122;
  --px-outline-variant: 18 41 62;
  --px-status-done: 52 211 153;
  --px-status-warn: 251 191 36;
  --px-inverse-surface: 234 246 251;
  --px-inverse-on-surface: 11 20 64;
  --px-selected-tint: 0 30 46;
}

html { color-scheme: light; }
html.dark { color-scheme: dark; }

body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Логотип: марка без подложек + ПРАКСИУС 800 с разрядкой 0.06em */
.px-wordmark {
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Скроллбар в тон поверхности, а не системный серый */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {
  background: rgb(var(--px-outline-variant));
  border-radius: 4px;
}
::-webkit-scrollbar-track { background: transparent; }

/* Поля ввода: в тёмной теме браузер иначе рисует белые прямоугольники.
   Селектор по тегу — специфичность ниже утилит Tailwind, поэтому
   собственный bg-* на конкретном поле по-прежнему выигрывает. */
html input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html select,
html textarea {
  background-color: rgb(var(--px-surface-container));
  color: rgb(var(--px-on-surface));
  border-color: rgb(var(--px-outline-variant));
  color-scheme: inherit;
}
input::placeholder, textarea::placeholder { color: rgb(var(--px-outline)); }
input[type="checkbox"], input[type="radio"] { accent-color: rgb(var(--px-primary)); }
input[type="file"] { color: rgb(var(--px-on-surface-variant)); }

/* macOS рисует <select> нативно и игнорирует background — снимаем
   системную отрисовку и ставим свою стрелку, иначе в тёмной теме
   остаётся белый прямоугольник. */
html select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235a6b8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 1.15rem;
  padding-right: 2.1rem;
}
html.dark select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238fa3bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
}
select option { background-color: rgb(var(--px-surface-container-lowest)); color: rgb(var(--px-on-surface)); }

/* ── Смысловые акценты в тёмной теме ─────────────────────────────
   Оставляем цвет-значение (зелёный «получилось», оранжевый
   «улучшить», фиолетовый, красный ошибки), но меняем светлую
   заливку на тёмную — иначе на тёмном фоне это светящиеся плашки.
   Тот же приём и те же значения, что в приложении. */
html.dark .bg-green-50, html.dark .bg-green-100,
html.dark .bg-emerald-50, html.dark .bg-emerald-100 { background-color: #06301c !important; }
html.dark .bg-orange-50, html.dark .bg-orange-100 { background-color: #2b1a06 !important; }
html.dark .bg-amber-50, html.dark .bg-amber-100 { background-color: #2b1a06 !important; }
html.dark .bg-red-50, html.dark .bg-red-100,
html.dark .bg-rose-50, html.dark .bg-rose-100 { background-color: #300b0b !important; }
html.dark .bg-violet-50, html.dark .bg-violet-100 { background-color: #1d1440 !important; }

html.dark .text-green-600, html.dark .text-green-700, html.dark .text-green-800,
html.dark .text-emerald-600, html.dark .text-emerald-700, html.dark .text-emerald-800,
html.dark .text-emerald-900 { color: #6ee7a8 !important; }
html.dark .text-orange-600, html.dark .text-orange-700, html.dark .text-orange-800 { color: #fdba74 !important; }
html.dark .text-amber-600, html.dark .text-amber-700, html.dark .text-amber-800,
html.dark .text-amber-900 { color: #fcd34d !important; }
html.dark .text-red-600, html.dark .text-red-700,
html.dark .text-rose-600, html.dark .text-rose-700, html.dark .text-rose-800 { color: #fca5a5 !important; }
html.dark .text-violet-600, html.dark .text-violet-700,
html.dark .text-violet-800, html.dark .text-violet-900 { color: #c4b5fd !important; }

html.dark .border-green-100, html.dark .border-green-200,
html.dark .border-emerald-100, html.dark .border-emerald-200 { border-color: #0a4a2c !important; }
html.dark .border-orange-100, html.dark .border-orange-200 { border-color: #4a2f0a !important; }
html.dark .border-amber-100, html.dark .border-amber-200 { border-color: #4a3a0a !important; }
html.dark .border-red-200, html.dark .border-rose-200 { border-color: #4a1414 !important; }
html.dark .border-violet-100, html.dark .border-violet-200 { border-color: #2c2160 !important; }

/* ── Общие компоненты кабинетов (/org, /admin) ───────────────────
   Рамка вместо тени; тень оставлена только всплывающим элементам. */

.px-sidebar { border-right: 1px solid rgb(var(--px-outline-variant)); }

.badge {
  display: inline-flex; align-items: center;
  padding: .25rem .625rem; border-radius: .75rem;
  font-size: 12px; font-weight: 600;
}
.badge-green  { background-color: #d6f4e4; color: #0e6b3c; }
.badge-red    { background-color: #fde3e3; color: #991b1b; }
.badge-amber  { background-color: #fdecd1; color: #92400e; }
.badge-orange { background-color: #fdecd1; color: #9a3412; }
.badge-neutral{ background-color: rgb(var(--px-surface-container-high)); color: rgb(var(--px-on-surface-variant)); }
html.dark .badge-green  { background-color: #06301c; color: #6ee7a8; }
html.dark .badge-red    { background-color: #300b0b; color: #fca5a5; }
html.dark .badge-amber  { background-color: #2b1a06; color: #fcd34d; }
html.dark .badge-orange { background-color: #2b1a06; color: #fdba74; }

/* Скрим у модальных окон — нейтральный чёрный в обеих темах */
.modal-overlay { background: rgba(0, 0, 0, .5); }
html.dark .modal-overlay { background: rgba(0, 0, 0, .7); }

@keyframes pxFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn { animation: pxFadeIn .3s ease-out; }

/* Полоски графиков и прогресса — сплошной акцент, без градиентов */
.px-bar { background: rgb(var(--px-primary)); }

/* ── Кнопки ──────────────────────────────────────────────────────
   Основная — заливка primary-container, h-14, rounded-2xl, 700/17px.
   Компактный вариант px-btn-sm — для панелей и таблиц рабочего
   стола, где кнопка в 56px ломает плотность строки.
   Вторичная — рамка primary/50 на прозрачном фоне. */

.px-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: rgb(var(--px-primary-container));
  color: #fff;
  height: 3.5rem;
  padding: 0 1.25rem;
  border-radius: 1rem;
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  white-space: nowrap;
  transition: transform .12s ease, opacity .12s ease;
}
.px-btn:active:not(:disabled) { transform: scale(.98); }
.px-btn:disabled { opacity: .4; cursor: default; }

.px-btn-sm { height: 2.5rem; padding: 0 1rem; border-radius: .75rem; font-size: 14px; font-weight: 600; }

.px-btn-ghost {
  background: transparent;
  color: rgb(var(--px-primary));
  border: 1px solid rgb(var(--px-primary) / .5);
}

.px-btn-quiet {
  background: transparent;
  color: rgb(var(--px-on-surface));
  border: 1px solid rgb(var(--px-outline-variant));
}

/* NFR-10: фокус виден при навигации с клавиатуры, мышью — не мешает */
:focus-visible {
  outline: 2px solid rgb(var(--px-primary));
  outline-offset: 2px;
  border-radius: 6px;
}
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }