/*
 * appearance.css — альтернативный дизайн «Новый» (фирменный стиль majorpack)
 *
 * Переключается атрибутом data-appearance="classic" на <html>
 * (имя атрибута сохранено для совместимости с v134; «classic» = альтернативный
 * дизайн, исходное оформление планировщика — «Классика»).
 * Полностью независим от data-theme (light / dark):
 *   [data-appearance="classic"]               → majorpack + светлая
 *   [data-appearance="classic"][data-theme="dark"] → majorpack + тёмная
 *
 * Палитра — фирменные токены majorpack.ru (измерено по CSS сайта 14.10.2026):
 *   акцент #d43e17 (красно-оранжевый), тёмный вариант #E84E1F;
 *   нейтрали #000/#fff/#141414/#1c1c1c/#212121, текст #414141, границы #cacaca.
 *   Характер: строгий индустриальный, один узнаваемый акцент.
 *   Вариант арены B «Тёмный индустриальный»: контрасты ink/surface 17.61→15.60,
 *   muted 6.03→6.57, accent 4.67/4.86 (WCAG AA), --bar ≠ --accent на обеих темах.
 *
 * Геометрия (row/head/cols/splitter/grid-pane/tab-bar) — НЕ МЕНЯЕТСЯ.
 * Только цвета, типографика, радиусы, тени.
 */

/* ================================================================
   «НОВЫЙ» (majorpack) — СВЕТЛАЯ
   ================================================================ */

[data-appearance="classic"] {
  --ink:         #17191C;
  --paper:       #F1F2F3;
  --panel:       #FFFFFF;
  --surface:     #FFFFFF;
  --surface-2:   #F7F8F9;
  --surface-3:   #EDEFF1;
  --hover:       #F1F3F4;
  --sel:         #F2E4DE;
  --rule:        #CACACA;
  --rule-soft:   #E2E4E6;
  --muted:       #5C6469;

  --mix-bg:      #FFFFFF;
  --invert-bg:   #141414;
  --invert-fg:   #FFFFFF;

  --topbar-bg:   #141414;
  --topbar-fg:   #F0F1F2;
  --topbar-muted:#9AA0A5;

  --sidebar-bg:  #191B1E;
  --sidebar-fg:  #C4C8CB;
  --sidebar-hover:#2A2D30;
  --sidebar-title:#83898E;

  --auth-bg:     #141414;

  --off-day:     #E8EAEC;
  --zebra:       #F4F5F6;
  --baseline:    #BBBFC2;
  --extra-stripe:#F6F2EA;
  --handle-shade:rgba(0,0,0,.18);
  --shadow:      rgba(10,10,11,.22);

  --bar:         #666C70;
  --bar-deep:    #4A5054;
  --group:       #4C5257;
  --milestone:   #8E6A18;
  --critical:    #FF3B30;
  --warn:        #805B20;
  --danger-ink:  #B42318;
  --link:        #55707E;
  --accent:      #d43e17;

  /* мобильные токены (mobile.css) — тот же фирменный набор */
  --topbar:      #141414;
  --red:         #FF3B30;
  --yellow:      var(--warn);
  --green:       #127A54;
  --gray:        #6E7478;
  --accent-gns:  #d43e17;

  color-scheme: light;
  scrollbar-color: var(--rule) var(--surface-2);
}

/* Мобильная оболочка /m: фон view не должен просвечивать slate body.
   Маркер .mobile-head ограничивает правила mobile.html, не desktop/F7.
   Корень оставляем surface: нижняя safe-area сливается с таб-баром. */
[data-appearance="classic"][data-theme]:has(.mobile-head) {
  background: var(--surface);
}
[data-appearance="classic"][data-theme] body:has(> #app > .mobile-head),
[data-appearance="classic"][data-theme] #app:has(> .mobile-head) > :is(#content, #kanban-view, #profile-view, #notes-view) {
  background: var(--paper);
}

/* ——— Типографика «Новый» ——— */
[data-appearance="classic"] body {
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  font-size:12px;
  letter-spacing: 0.01em;
}

[data-appearance="classic"] .topbar h1 {
  font-size:14px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Бренд: моноширинный интервал + фирменный акцент */
[data-appearance="classic"] .brand {
  letter-spacing: 0.28em;
}

[data-appearance="classic"] .brand-mark {
  background: var(--accent);
}

/* ——— Шапка ——— */
[data-appearance="classic"] .topbar {
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* ——— Сайдбар ——— */
[data-appearance="classic"] .sidebar {
  border-right: 1px solid var(--rule);
}

[data-appearance="classic"] .proj.active {
  background: var(--sidebar-hover);
  border-left-color: var(--accent);
  color: #F0F1F2;
}

/* ——— Кнопки ——— */
[data-appearance="classic"] .btn {
  border-radius: 3px;
  transition: background .1s, border-color .1s;
}

[data-appearance="classic"] .btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
  font-weight: 600;
  letter-spacing: 0.02em;
}

[data-appearance="classic"] .seg {
  border-radius: 3px;
}

[data-appearance="classic"] .seg button {
  border-radius: 0;
}

/* ——— Тулбар ——— */
[data-appearance="classic"] .toolbar {
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
}

/* ——— Шапка таблицы ——— */
[data-appearance="classic"] .grid-head {
  background: var(--surface-2);
  font-size:11px;
  letter-spacing: 0.07em;
}

/* ——— Строки ——— */
[data-appearance="classic"] .row {
  border-bottom-color: var(--rule-soft);
}

[data-appearance="classic"] .row.zebra {
  background: var(--zebra);
}

/* ——— Карточки канбан ——— */
[data-appearance="classic"] .card {
  border-radius: 4px;
  box-shadow: 0 1px 4px var(--shadow);
}

/* ——— Модальные окна ——— */
[data-appearance="classic"] .modal {
  border-radius: 4px;
  box-shadow: 0 12px 40px var(--shadow);
}

/* ——— Шапка диаграммы ——— */
[data-appearance="classic"] .hquarter {
  font-weight: 700;
  letter-spacing: 0.04em;
}

[data-appearance="classic"] .hmonth {
  letter-spacing: 0.06em;
}

/* ——— Акцентные плашки / бейджи ——— */
[data-appearance="classic"] .late-badge.overdue {
  /* Белый на #FF3B30 = 3.55:1 — ниже 4.5:1; тёмный торт на красном даёт 6.77:1 */
  background: var(--critical);
  /* #1B2B3A на #FF3B30 = 4.07:1 — ниже 4.5:1; #0F172A даёт 5.03:1 */
  color: #0F172A;
  font-weight: 700;
}

/* ——— Analytics cards ——— */
[data-appearance="classic"] .analytics-card {
  border-radius: 4px;
  border-color: var(--rule);
}


/* ================================================================
   «НОВЫЙ» (majorpack) — ТЁМНАЯ
   ================================================================ */

[data-appearance="classic"][data-theme="dark"] {
  --ink:         #ECECED;
  --paper:       #0A0A0B;
  --panel:       #141414;
  --surface:     #141414;
  --surface-2:   #1C1C1C;
  --surface-3:   #212121;
  --hover:       #242424;
  --sel:         #33211A;
  --rule:        #333336;
  --rule-soft:   #242427;
  --muted:       #9A9A9E;

  --mix-bg:      #141414;
  --invert-bg:   #D43E17;
  --invert-fg:   #FFFFFF;

  --topbar-bg:   #0A0A0B;
  --topbar-fg:   #F0F0F0;
  --topbar-muted:#9A9A9E;

  --sidebar-bg:  #101011;
  --sidebar-fg:  #B9B9BC;
  --sidebar-hover:#1E1E20;
  --sidebar-title:#86868B;

  --auth-bg:     #0A0A0B;

  --off-day:     #171718;
  --zebra:       #131314;
  --baseline:    #4A4A4E;
  --extra-stripe:#221A15;
  --handle-shade:rgba(255,255,255,.22);
  --shadow:      rgba(0,0,0,.65);

  --bar:         #9BA1A6;
  --bar-deep:    #6E767B;
  --group:       #525E64;
  --milestone:   #D9A441;
  --critical:    #FF3B30;
  --warn:        #C6A46A;
  --danger-ink:  #F08B80;
  --link:        #90A6B2;
  --accent:      #E84E1F;

  /* мобильные токены (mobile.css, тёмная) */
  --topbar:      #0A0A0B;
  --red:         #FF3B30;
  --yellow:      var(--warn);
  --green:       #3FBF86;
  --gray:        #7C8286;

  color-scheme: dark;
  scrollbar-color: var(--rule) var(--surface-2);
}

[data-appearance="classic"][data-theme="dark"] .brand-mark {
  background: var(--accent);
}


/* ================================================================
   ПЕРЕКЛЮЧАТЕЛЬ: контейнер .appearance-toggle
   Вставляется через JS идемпотентно рядом с .theme-toggle.
   Контраст в обоих дизайнах >= 4.5:1 по WCAG AA.
   ================================================================ */

.appearance-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--topbar-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.appearance-toggle .appr-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* Кнопка-переключатель: pill-стиль */
.appr-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 52px;
  height: 22px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  cursor: pointer;
  padding: 0;
  transition: background .18s, border-color .18s;
  flex-shrink: 0;
}

.appr-btn[aria-pressed="true"] {
  background: var(--accent, #d43e17);
  border-color: var(--accent, #d43e17);
}

.appr-knob {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .18s;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  pointer-events: none;
}

.appr-btn[aria-pressed="true"] .appr-knob {
  transform: translateX(30px);
}

.appr-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


/* ================================================================
   МОБИЛЬНЫЙ переключатель в profile-section
   (аналог .theme-switch / .theme-btn из mobile.html)
   ================================================================ */

.appearance-switch {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.appr-choice-btn {
  flex: 1;
  min-width: 80px;
  padding: 9px 6px;
  font-size:12px;
  line-height: 1.2;
  background: var(--surface-2, #F7F8F9);
  border: 1px solid var(--rule, #CACACA);
  border-radius: 10px;
  color: var(--ink, #17191C);
  cursor: pointer;
  text-align: center;
  transition: background .12s, border-color .12s;
  font-family: inherit;
}

.appr-choice-btn:hover {
  background: var(--hover, #F1F3F4);
}

.appr-choice-btn.active {
  background: var(--accent, #d43e17);
  color: #FFFFFF;
  border-color: var(--accent, #d43e17);
  font-weight: 600;
}

/* У мобильной версии переменные берутся из mobile.css,
   поэтому дублируем fallback-цвета для совместимости. */