/* ==========================================================================
   COSA — тёмная тема

   Подключается ПОСЛЕ базовых стилей и переопределяет токены из
   variables.css. Отдельным файлом, а не правкой variables.css, чтобы
   светлая тема осталась целой и откат сводился к снятию одной строки
   в layout.php.

   Палитра выдержана в низкой насыщенности: на тёмном любая яркая заливка
   лезет вперёд и выглядит дёшево. Отсюда приглушённый синий вместо
   брендового #2C5F8A (он на чёрном мутнеет) и мягкие зелёный с красным.

   Фон не чёрный. Чистый #000 съедает тени и делает панели плоскими
   наклейками; вместо него очень тёмный нейтральный с холодным уклоном
   плюс еле различимый градиент — он и даёт стеклу что подхватывать.
   ========================================================================== */

:root {
  /* ---- Основа ---- */
  --color-bg:               #0C0D10;
  --color-surface:          #15171C;
  --color-border:           #23262E;
  --color-text:             #E7E9EE;
  --color-text-muted:       #8A909C;

  /* ---- Акцент ---- */
  --color-primary:          #4C8FD4;
  --color-primary-hover:    #6AA6E4;
  --color-primary-light:    rgba(76, 143, 212, 0.16);

  /* ---- Смысловые ---- */
  --color-success:          #4FB984;
  --color-success-light:    rgba(79, 185, 132, 0.15);

  --color-warning:          #D9A441;
  --color-warning-light:    rgba(217, 164, 65, 0.15);

  --color-danger:           #E0706F;
  --color-danger-light:     rgba(224, 112, 111, 0.15);

  /* ---- Сайдбар ---- */
  --color-sidebar:          #0F1115;
  --color-sidebar-hover:    rgba(255, 255, 255, 0.055);
  --color-sidebar-text:     #B7BDC8;
  --color-sidebar-active:   #4C8FD4;

  /* ---- Тени: на тёмном они должны быть глубже и мягче ---- */
  --shadow-sm:              0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md:              0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-lg:              0 14px 40px rgba(0, 0, 0, 0.55);

  /* ---- Служебные оттенки тёмной темы ----
     Светлые заливки в базовом CSS заданы конкретными значениями
     (#F5F4F0, #F0EFEB, rgba(0,0,0,.03)); на тёмном они превращаются
     в белые пятна, поэтому ниже для них есть замены. */
  --dark-inset:             rgba(255, 255, 255, 0.045);
  --dark-inset-strong:      rgba(255, 255, 255, 0.075);
  --dark-hairline:          rgba(255, 255, 255, 0.07);
}

/* --------------------------------------------------------------------------
   Замена светлых заливок, зашитых в базовые файлы
   -------------------------------------------------------------------------- */
body { background: var(--color-bg); color: var(--color-text); }

.table th               { background: var(--dark-inset); color: var(--color-text-muted); }
.table-striped tbody tr:nth-child(even),
.card-footer            { background: var(--dark-inset); }
.tab:hover:not(.active) { background: var(--dark-inset); }

.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled   { background-color: var(--dark-inset); color: var(--color-text-muted); }

.progress               { background: var(--dark-inset-strong); }

.skeleton {
  background: linear-gradient(90deg,
      var(--dark-inset) 25%,
      var(--dark-inset-strong) 50%,
      var(--dark-inset) 75%) !important;
  background-size: 200% 100% !important;
}

.widget-photo,
.widget-photo-placeholder { background: var(--dark-inset); }

/* Нейтральный значок был светло-бежевым — на тёмном это белая нашлёпка */
.badge-neutral {
  background: var(--dark-inset-strong);
  color: var(--color-text-muted);
}

/* Подложка окна — глубже, чем в светлой теме, иначе окно не отделяется */
.modal-overlay { background: rgba(6, 7, 9, 0.62); }

/* --------------------------------------------------------------------------
   Контраст

   Эти значения в базовом CSS рассчитаны на светлый интерфейс с тёмным
   сайдбаром. На общем тёмном фоне те же rgba(255,255,255,.4) дают 3.8:1
   при норме 4.5 для мелкого текста, а версия внизу — и вовсе 2.6:1.
   -------------------------------------------------------------------------- */
.sidebar-logo-subtitle,
.sidebar-section-title { color: rgba(255, 255, 255, 0.58); }

.sidebar-footer,
.sidebar-footer div    { color: rgba(255, 255, 255, 0.5); }

/* Белые инициалы на акцентном круге давали 3.4:1 — акцент светлый, значит
   текст на нём должен быть тёмным. */
.header-user-avatar { color: #0B0D11; }

/* Полосы прокрутки под тёмный фон */
* { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }
::-webkit-scrollbar        { width: 10px; height: 10px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #33373F;
  background-clip: padding-box;
}

/* Браузерная автоподстановка красит поле в ярко-жёлтый — гасим */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text);
  -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset;
  caret-color: var(--color-text);
}

/* Пиктограммы, нарисованные тёмным по светлому, инвертировать не нужно —
   в проекте они векторные и наследуют currentColor. Но у выбора цвета и
   у календаря нативный виджет светлый: просим браузер рисовать тёмный. */
:root { color-scheme: dark; }