/* ==========================================================================
   COSA — светлая тема нового дизайна

   Подключается ПОСЛЕ glass.css и работает под классом html.theme-light.
   Класс, а не отдельный набор файлов, — чтобы переключение происходило
   мгновенно, без перезагрузки: браузер просто пересчитывает каскад.

   Это не возврат к старому светлому интерфейсу. Материал, глубина, движение
   и раскладка остаются от нового дизайна — меняется освещение сцены.

   Сайдбар остаётся тёмным намеренно. Так устроен продукт с самого начала, и
   тёмная обвязка вокруг светлого содержимого держит взгляд внутри рабочей
   области: светлое меню на светлом фоне сливается и перестаёт быть краем.
   ========================================================================== */

html.theme-light {
  /* ---- Основа ---- */
  --color-bg:               #F1F2F5;
  --color-surface:          #FFFFFF;
  --color-border:           #E3E6EC;
  --color-text:             #14181F;
  --color-text-muted:       #5C6675;

  /* ---- Акцент ----
     На светлом фоне #4C8FD4 как текст слишком слаб — не дотягивает до 4.5.
     Здесь акцент темнее; заливкам это не мешает, белый на нём читается
     даже лучше прежнего. */
  --color-primary:          #26619F;
  --color-primary-hover:    #1D5089;
  --color-primary-light:    rgba(38, 97, 159, 0.12);

  /* ---- Смысловые: на светлом нужны тёмные, иначе текст не читается ---- */
  --color-success:          #2E7D52;
  --color-success-light:    rgba(46, 125, 82, 0.12);

  --color-warning:          #8A5E10;
  --color-warning-light:    rgba(138, 94, 16, 0.12);

  --color-danger:           #B3403F;
  --color-danger-light:     rgba(179, 64, 63, 0.12);

  /* ---- Сайдбар остаётся тёмным ---- */
  --color-sidebar:          #14161B;
  --color-sidebar-hover:    rgba(255, 255, 255, 0.06);
  --color-sidebar-text:     #C7CDD8;
  --color-sidebar-active:   #4C8FD4;

  /* ---- Тени: на светлом они мягкие и холодные, а не чёрные ---- */
  --shadow-sm:              0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md:              0 4px 14px rgba(16, 24, 40, 0.07);
  --shadow-lg:              0 14px 36px rgba(16, 24, 40, 0.10);

  /* ---- Служебные заливки (в тёмной теме они белые с малой прозрачностью) ---- */
  --dark-inset:             rgba(16, 24, 40, 0.035);
  --dark-inset-strong:      rgba(16, 24, 40, 0.06);
  --dark-hairline:          rgba(16, 24, 40, 0.08);

  /* ---- Материал ----
     Тело поверхности почти белое и плотное: на светлом фоне прозрачная
     плашка теряет края и перестаёт быть предметом. */
  --glass-bg:               rgba(255, 255, 255, 0.86);
  --glass-bg-raised:        rgba(255, 255, 255, 0.96);
  --glass-edge:             rgba(16, 24, 40, 0.09);
  --glass-edge-top:         rgba(255, 255, 255, 0.9);
  --glass-shade-bottom:     rgba(16, 24, 40, 0.045);

  /* Шапка светлая; сайдбару свой цвет задан ниже отдельным правилом */
  --panel-bg:               rgba(255, 255, 255, 0.72);
  --panel-blur:             blur(18px) saturate(1.1);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   Фон страницы

   Тот же рисунок, что в тёмной теме: линия под краем сайдбара, два пятна и
   вертикальный градиент. Только свет теперь не добавляется, а отнимается —
   на светлом фоне «пятно света» это лёгкое похолодание.
   -------------------------------------------------------------------------- */
html.theme-light body {
  background:
    linear-gradient(180deg, transparent, rgba(44, 95, 138, 0.20) 18%,
                    rgba(44, 95, 138, 0.20) 74%, transparent) no-repeat,
    radial-gradient(60rem 40rem at 12% -10%, rgba(44, 95, 138, 0.07), transparent 60%),
    radial-gradient(50rem 36rem at 92% 8%,  rgba(70, 110, 160, 0.05), transparent 58%),
    linear-gradient(180deg, #F7F8FA 0%, #F1F2F5 45%, #EBEDF1 100%);
  background-size: 1px 100%, auto, auto, auto;
  background-position: var(--sidebar-width) 0, 0 0, 0 0, 0 0;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--color-text);
}

html.theme-light body:has(.sidebar.collapsed) {
  background-position: var(--sidebar-collapsed) 0, 0 0, 0 0, 0 0;
}

@media (max-width: 768px) {
  html.theme-light body,
  html.theme-light body:has(.sidebar.collapsed) { background-size: 0 0, auto, auto, auto; }
}

/* --------------------------------------------------------------------------
   Обвязка: светлая шапка, тёмный сайдбар
   -------------------------------------------------------------------------- */
html.theme-light .header {
  background: var(--panel-bg);
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
}

html.theme-light .sidebar {
  background: rgba(18, 20, 26, 0.94);
  border-right: 1px solid rgba(16, 24, 40, 0.14);
}

html.theme-light .sidebar-footer { border-top: 1px solid rgba(255, 255, 255, 0.08); }

/* Метка активного пункта живёт на тёмном сайдбаре — остаётся светящейся */
html.theme-light .sidebar-marker {
  background: linear-gradient(90deg,
              rgba(76, 143, 212, 0.30), rgba(76, 143, 212, 0.08) 65%, transparent);
  border-left-color: #4C8FD4;
  box-shadow: inset 1px 0 12px rgba(76, 143, 212, 0.22);
}

/* --------------------------------------------------------------------------
   Свет в области содержимого

   Лучи и волны на светлом фоне рисуются тёмно-синим: это тень от света, а не
   сам свет. Прозрачность подобрана по порогу различимости, как и в тёмной.
   -------------------------------------------------------------------------- */
html.theme-light .main-content::before {
  background: linear-gradient(to bottom, transparent 5%, rgba(44, 95, 138, 0.075) 25%,
              rgba(44, 95, 138, 0.04) 75%, transparent 95%);
}

html.theme-light .main-content::after {
  background: linear-gradient(to bottom, transparent 8%, rgba(44, 95, 138, 0.055) 30%,
              rgba(44, 95, 138, 0.03) 70%, transparent 92%);
}

html.theme-light .page-content::before {
  background: linear-gradient(to bottom, transparent 10%, rgba(44, 95, 138, 0.045) 35%,
              rgba(44, 95, 138, 0.025) 65%, transparent 90%);
}

html.theme-light .page-content::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 200' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%232C5F8A' stroke-opacity='0.20' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M0,160 C80,160 100,40 200,40 C300,40 280,170 370,170 C420,170 480,80 500,80'/%3E%3Cpath d='M0,180 C90,180 130,60 220,55 C310,50 310,180 400,175 C440,173 490,110 500,105'/%3E%3Cpath d='M0,195 C100,195 160,90 250,80 C330,72 340,190 420,185 C460,182 495,140 500,135'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(60rem 32rem at 78% -6%, rgba(44, 95, 138, 0.09) 0%, transparent 62%),
    radial-gradient(40rem 30rem at 6% 92%, rgba(44, 95, 138, 0.05) 0%, transparent 55%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: right -40px top -10px, 0 0, 0 0;
  background-size: 62% 230px, auto, auto;
}

/* --------------------------------------------------------------------------
   Поверхности
   -------------------------------------------------------------------------- */
html.theme-light .card:hover,
html.theme-light .widget:hover { border-color: rgba(16, 24, 40, 0.16); }

html.theme-light .modal         { background: rgba(255, 255, 255, 0.96); border-color: rgba(16, 24, 40, 0.10); }
html.theme-light .modal-overlay { background: rgba(16, 24, 40, 0.34); }
html.theme-light .dropdown-menu { background: rgba(255, 255, 255, 0.97); border-color: rgba(16, 24, 40, 0.10); }
html.theme-light .toast         { background: rgba(255, 255, 255, 0.97); border-color: rgba(16, 24, 40, 0.10); }
html.theme-light .login-card    { background: rgba(255, 255, 255, 0.9); }
/* Полоса вкладок в тёмной теме залита чёрным с прозрачностью — на светлом
   это грязное пятно во всю ширину. Здесь она утоплена наоборот: чуть темнее
   фона страницы, чтобы активная вкладка читалась как поднятая. */
html.theme-light .tabs {
  background: rgba(16, 24, 40, 0.045);
  border: 1px solid rgba(16, 24, 40, 0.08);
}

html.theme-light .tab.active {
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.10);
  color: var(--color-text);
}

html.theme-light .tab:hover:not(.active) { background: rgba(16, 24, 40, 0.035); }

/* --------------------------------------------------------------------------
   Таблицы
   -------------------------------------------------------------------------- */
html.theme-light .table tbody tr:nth-child(even) > td   { background: rgba(16, 24, 40, 0.018); }
html.theme-light .table tbody tr:hover > td             { background: rgba(44, 111, 181, 0.075); }
html.theme-light .table tbody tr:hover > td:first-child { box-shadow: inset 3px 0 0 var(--color-primary); }
html.theme-light .table th                              { background: rgba(16, 24, 40, 0.035); }

/* --------------------------------------------------------------------------
   Поля ввода

   Выпадающий список браузер рисует сам, беря цвет у самого элемента:
   непрозрачный фон и color-scheme нужны, иначе список приедет из чужой темы.
   -------------------------------------------------------------------------- */
html.theme-light .form-input,
html.theme-light .form-select,
html.theme-light .form-textarea,
html.theme-light .login-input {
  background-color: #FFFFFF;
  border-color: rgba(16, 24, 40, 0.14);
  color: var(--color-text);
  color-scheme: light;
}

html.theme-light .form-select option,
html.theme-light select option { background-color: #FFFFFF; color: var(--color-text); }

html.theme-light .form-file-btn,
html.theme-light input[type="file"]::file-selector-button {
  background: rgba(16, 24, 40, 0.04);
  border-color: rgba(16, 24, 40, 0.12);
  color: var(--color-text);
}

html.theme-light .form-file-btn:hover,
html.theme-light input[type="file"]::file-selector-button:hover {
  background: rgba(44, 111, 181, 0.10);
}

/* Автозаполнение: браузер подставляет свой жёлтый — гасим его тенью */
html.theme-light input:-webkit-autofill,
html.theme-light input:-webkit-autofill:hover,
html.theme-light input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset;
  -webkit-text-fill-color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Акцентные детали
   -------------------------------------------------------------------------- */
html.theme-light .badge-primary,
html.theme-light .badge-info    { color: #1D5089; }
html.theme-light .badge-neutral { background: rgba(16, 24, 40, 0.06); color: var(--color-text-muted); }

html.theme-light .btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}

html.theme-light .btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

html.theme-light .btn-ghost:hover { background: rgba(16, 24, 40, 0.05); }

html.theme-light .page-header { border-bottom-color: rgba(16, 24, 40, 0.09); }

html.theme-light .empty-state-icon {
  background: radial-gradient(circle at 50% 42%,
              rgba(44, 111, 181, 0.16), rgba(44, 111, 181, 0.04) 72%);
  border-color: rgba(16, 24, 40, 0.08);
  box-shadow: none;
}

html.theme-light .spinner {
  border-color: rgba(44, 111, 181, 0.2);
  border-top-color: var(--color-primary);
}

html.theme-light .nav-progress {
  background: linear-gradient(90deg,
              rgba(44, 111, 181, 0.25), var(--color-primary) 60%, #5C9BE0);
  box-shadow: 0 0 10px rgba(44, 111, 181, 0.35);
}

/* Инициалы в шапке: тёмная тема делает их тёмными под светлый акцент —
   на светлой теме акцент глубокий, значит текст снова белый */
html.theme-light .header-user-avatar { color: #FFFFFF; background: var(--color-primary); }

/* Подписи в тёмном сайдбаре светлее, чем задаёт тёмная тема */
html.theme-light .sidebar-logo-subtitle,
html.theme-light .sidebar-section-title { color: rgba(255, 255, 255, 0.55); }
html.theme-light .sidebar-footer,
html.theme-light .sidebar-footer div    { color: rgba(255, 255, 255, 0.5); }

/* --------------------------------------------------------------------------
   Полосы прокрутки и выделение
   -------------------------------------------------------------------------- */
html.theme-light * { scrollbar-color: rgba(16, 24, 40, 0.22) transparent; }
html.theme-light ::-webkit-scrollbar-thumb       { background: rgba(16, 24, 40, 0.18); }
html.theme-light ::-webkit-scrollbar-thumb:hover { background: rgba(16, 24, 40, 0.30); }
html.theme-light ::selection { background: rgba(44, 111, 181, 0.22); color: var(--color-text); }

/* Уход со страницы: фон берётся из токена, знак — из акцента, поэтому
   отдельных правил не нужно; здесь только подложка, чтобы она совпала. */
html.theme-light .page-exit { background: var(--color-bg); }

/* Экран без прозрачности: стекло заменяем сплошными светлыми заливками */
@media (prefers-reduced-transparency: reduce) {
  html.theme-light .header       { background: #FFFFFF; }
  html.theme-light .sidebar      { background: #14161B; }
  html.theme-light .modal,
  html.theme-light .dropdown-menu,
  html.theme-light .toast,
  html.theme-light .login-card   { background: #FFFFFF; }
  html.theme-light .card,
  html.theme-light .widget,
  html.theme-light .stat-card,
  html.theme-light .table-wrapper,
  html.theme-light .dashboard-hero { background: #FFFFFF; }
}

/* --------------------------------------------------------------------------
   Шапка диспетчерской

   В базовом CSS она залита тёмным градиентом, и весь текст внутри задан
   белым напрямую. Но glass.css перечисляет .dashboard-hero среди
   поверхностей, поэтому в светлой теме она становится белой плашкой — и
   белый текст на ней пропадает начисто.

   Возвращать тёмную заливку не стал: тёмный прямоугольник посреди светлой
   страницы выглядит как чужой элемент. Вместо этого перекрашено содержимое.
   -------------------------------------------------------------------------- */
html.theme-light .dashboard-hero-greeting h2 { color: var(--color-text); }
html.theme-light .dashboard-hero-greeting p,
html.theme-light .dashboard-hero-date        { color: var(--color-text-muted); }

html.theme-light .dashboard-hero .stat-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(16, 24, 40, 0.08);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}

html.theme-light .dashboard-hero .stat-value { color: var(--color-text); }
html.theme-light .dashboard-hero .stat-label { color: var(--color-text-muted); }

/* Значки: на светлой плашке нужен тёмный знак, а не пастельный */
html.theme-light .dashboard-hero .stat-icon-primary { background: rgba(44, 111, 181, 0.12); color: #235C99; }
html.theme-light .dashboard-hero .stat-icon-success { background: rgba(46, 125, 82, 0.12);  color: #226B45; }
html.theme-light .dashboard-hero .stat-icon-warning { background: rgba(138, 94, 16, 0.12);  color: #7A5210; }
html.theme-light .dashboard-hero .stat-icon-danger  { background: rgba(179, 64, 63, 0.12);  color: #9E3736; }

/* Кривые в шапке нарисованы белым — на светлом их не видно вовсе */
html.theme-light .hero-line-1 { stroke: rgba(44, 95, 138, 0.14); }
html.theme-light .hero-line-2 { stroke: rgba(44, 95, 138, 0.10); }
html.theme-light .hero-line-3 { stroke: rgba(44, 95, 138, 0.07); }

/* --------------------------------------------------------------------------
   Смысловые бейджи

   На светлой плашке текст #2E7D52 давал 4.09–4.29 при норме 4.5 —
   близко, но мимо. Берём те же цвета на ступень темнее.
   -------------------------------------------------------------------------- */
html.theme-light .badge-success { color: #1F6742; }
html.theme-light .badge-warning { color: #74500E; }
html.theme-light .badge-danger  { color: #9B3736; }