/* SynnFrameFW — системные настройки оформления (страница «Системные настройки → Оформление»).
 * Загружается ПОСЛЕДНИМ. theming.js (synnframefw.appearance.apply) ставит на :root переменные --ap-*
 * и атрибут data-ap со списком заданных ключей; правила срабатывают только для заданных ключей,
 * поэтому без настроек интерфейс остаётся стандартным. Все оформительские настройки — только здесь. */

/* ── Фон ── */
:root[data-ap~="bg_workspace"] { --surface-bg: var(--ap-bg-workspace); }
:root[data-ap~="bg_workspace"] body { background-color: var(--ap-bg-workspace); }
:root[data-ap~="bg_card"] { --surface-card: var(--ap-bg-card); --surface-elevated: var(--ap-bg-card); }
:root[data-ap~="bg_card"] .e-grid, :root[data-ap~="bg_card"] .e-grid .e-content, :root[data-ap~="bg_card"] .e-grid .e-gridcontent,
:root[data-ap~="bg_card"] .e-grid .e-row .e-rowcell { background-color: var(--ap-bg-card); }
:root[data-ap~="bg_header"] .synn-topbar { background: var(--ap-bg-header); }

/* ── Акцент: токены платформы и палитра Syncfusion Fluent 2 ── */
:root[data-ap~="accent"] {
  --brand-1: var(--ap-accent); --brand-2: var(--ap-accent); --brand-primary: var(--ap-accent);
  --brand-1-hover: var(--ap-accent-hover, color-mix(in srgb, var(--ap-accent) 85%, #000)); --brand-2-hover: var(--brand-1-hover);
  --brand-2-active: var(--ap-accent-active, color-mix(in srgb, var(--ap-accent) 70%, #000)); --brand-primary-hover: var(--brand-1-hover);
  /* Текст на заливке акцентом: белый или тёмный по яркости акцента (theming.js считает --ap-on-accent, контраст ≥ 4.5:1). */
  --text-on-brand: var(--ap-on-accent, #fff); --color-sf-primary-text-color: var(--ap-on-accent, #fff);
  --brand-primary-active: var(--brand-2-active);
  --accent-bar: var(--ap-accent); --border-focus: var(--ap-accent);
  --surface-selected: color-mix(in srgb, var(--ap-accent) 12%, var(--surface-card));
  --focus-halo: color-mix(in srgb, var(--ap-accent) 18%, transparent);
  --color-sf-primary: var(--ap-accent); --color-sf-primary-bg-color: var(--ap-accent);
  --color-sf-primary-border-color: var(--ap-accent);
  --color-sf-primary-bg-color-hover: var(--brand-1-hover); --color-sf-primary-border-color-hover: var(--brand-1-hover);
  --color-sf-primary-bg-color-pressed: var(--brand-2-active); --color-sf-primary-border-color-pressed: var(--brand-2-active);
  --color-sf-primary-dark: var(--brand-2-active);
  --color-sf-primary-lighter: color-mix(in srgb, var(--ap-accent) 12%, var(--surface-card));
}
:root[data-ap~="accent"] .synn-body a:not([class*="e-"]):not(.ra):not(.e-btn):not(.primary):not(.synn-btn-main):not(.btn-main) { color: var(--ap-accent); }
/* Кнопки быстрых действий главной — это ссылки, но подпись у них обычная (светлый акцент на белом нечитаем). */
:root[data-ap~="accent"] .synn-body .sf-quick.sf-quick.sf-quick a:not([class*="e-"]):not(.ra):not(.e-btn):not(.primary) { color: var(--text-primary); }
/* Ссылка-кнопка на заливке акцентом: подпись контрастна к акценту, а не цвета акцента. */
:root[data-ap~="accent"] .synn-body a.primary, :root[data-ap~="accent"] .synn-body a.synn-btn-main { color: var(--text-on-brand); }

/* ── Шрифт: гарнитура (иконочные шрифты и моноширинный не трогаем) ── */
:root[data-ap~="font_family"] { --font-family: var(--ap-font-family); }
:root[data-ap~="font_family"] body,
:root[data-ap~="font_family"] :is(button, input, select, textarea, .e-control, .e-grid, .e-btn, .e-input, .e-popup, .e-dialog, .e-toast, .e-tab, .e-menu-wrapper, .e-grid *):not(.e-icons):not(code):not(pre):not([class*="e-icon"]) {
  font-family: var(--ap-font-family);
}

/* ── Иконки ── */
:root[data-ap~="icon_size"] .synn-section .ico { font-size: var(--ap-icon-size); }

/* ── Меню: наведение/фокус/активный пункт при своих цветах ──
 * Стандартное наведение (--surface-hover, светло-серый) при тёмной панели и светлом тексте даёт
 * нечитаемый светлый-на-светлом. Если заданы цвета меню, фон наведения выводится из фона ПАНЕЛИ
 * (смесь с цветом текста меню), а текст остаётся цветом текста меню. */
:is(:root[data-ap~="m1_bg"], :root[data-ap~="menu1_color"], :root[data-ap~="menu1_hover_bg"], :root[data-ap~="menu1_hover_color"]) .synn-sections {
  --m1-panel: var(--ap-m1-bg, var(--ui-menu1-bg, var(--surface-card)));
  --m1-fg: var(--ap-menu1-color, var(--text-secondary));
  --m1-hover-bg: var(--ap-menu1-hover-bg, color-mix(in srgb, var(--m1-panel) 86%, var(--m1-fg)));
  --m1-hover-fg: var(--ap-menu1-hover-color, var(--m1-fg));
}
:is(:root[data-ap~="m1_bg"], :root[data-ap~="menu1_color"], :root[data-ap~="menu1_hover_bg"], :root[data-ap~="menu1_hover_color"]) .synn-section:is(:hover, :focus-visible) {
  background: var(--m1-hover-bg); color: var(--m1-hover-fg);
}
:is(:root[data-ap~="m1_bg"], :root[data-ap~="menu1_color"], :root[data-ap~="menu1_hover_bg"], :root[data-ap~="menu1_hover_color"]) .synn-section:is(:hover, :focus-visible) .ico { color: var(--m1-hover-fg); }
:is(:root[data-ap~="m1_bg"], :root[data-ap~="menu1_color"], :root[data-ap~="menu1_hover_bg"], :root[data-ap~="menu1_hover_color"]) .synn-section:focus-visible { outline: 2px solid var(--m1-hover-fg); outline-offset: -2px; }
/* Активный раздел: фон — как при наведении, чтобы текст оставался читаемым; цвет — текст меню. */
:is(:root[data-ap~="m1_bg"], :root[data-ap~="menu1_color"], :root[data-ap~="menu1_hover_bg"], :root[data-ap~="menu1_hover_color"]) .synn-section.active { color: var(--m1-fg); background: color-mix(in srgb, var(--m1-panel) 92%, var(--m1-fg)); }
/* Левое меню: при своём фоне панели или цвете текста — подсветка из фона панели. */
:is(:root[data-ap~="m2_bg"], :root[data-ap~="menu2_color"]) .synn-commands {
  --m2-panel: var(--ap-m2-bg, var(--ui-menu2-bg, var(--surface-card)));
  --m2-fg: var(--ap-menu2-color, var(--text-primary));
  --m2-hover-bg: color-mix(in srgb, var(--m2-panel) 88%, var(--m2-fg));
  --m2-sel-bg: color-mix(in srgb, var(--m2-panel) 80%, var(--m2-fg));
}
:is(:root[data-ap~="m2_bg"], :root[data-ap~="menu2_color"]) .synn-commands a:is(:hover, :focus-visible),
:is(:root[data-ap~="m2_bg"], :root[data-ap~="menu2_color"]) .synn-commands .nav-group-head:is(:hover, :focus-visible) { background: var(--m2-hover-bg); color: var(--m2-fg); }
:is(:root[data-ap~="m2_bg"], :root[data-ap~="menu2_color"]) .synn-commands a.active { background: var(--m2-sel-bg); color: var(--m2-fg); }
:is(:root[data-ap~="m2_bg"], :root[data-ap~="menu2_color"]) .synn-commands :is(.title, .nav-section-title, .nav-group-head, .nav-group-caret) { color: var(--m2-fg); opacity: 1; }

/* ── Типографика: title ── */
:root[data-ap~="title_size"] .synn-body h1,
:root[data-ap~="title_size"] .synn-page-header h1 { font-size: var(--ap-title-size); }
:root[data-ap~="title_weight"] .synn-body h1,
:root[data-ap~="title_weight"] .synn-page-header h1 { font-weight: var(--ap-title-weight); }
:root[data-ap~="title_italic"] .synn-body h1,
:root[data-ap~="title_italic"] .synn-page-header h1 { font-style: var(--ap-title-italic); }
:root[data-ap~="title_color"] .synn-body h1,
:root[data-ap~="title_color"] .synn-page-header h1 { color: var(--ap-title-color); }
:root[data-ap~="title_size"] { --fs-title: var(--ap-title-size); }
/* ── Типографика: body ── */
:root[data-ap~="body_size"] body,
:root[data-ap~="body_size"] .synn-body p,
:root[data-ap~="body_size"] .synn-body label,
:root[data-ap~="body_size"] .synn-body input,
:root[data-ap~="body_size"] .synn-body select,
:root[data-ap~="body_size"] .synn-body textarea,
:root[data-ap~="body_size"] .e-input,
:root[data-ap~="body_size"] .e-input-group input { font-size: var(--ap-body-size); }
:root[data-ap~="body_weight"] body,
:root[data-ap~="body_weight"] .synn-body p,
:root[data-ap~="body_weight"] .synn-body label,
:root[data-ap~="body_weight"] .synn-body input,
:root[data-ap~="body_weight"] .synn-body select,
:root[data-ap~="body_weight"] .synn-body textarea,
:root[data-ap~="body_weight"] .e-input,
:root[data-ap~="body_weight"] .e-input-group input { font-weight: var(--ap-body-weight); }
:root[data-ap~="body_italic"] body,
:root[data-ap~="body_italic"] .synn-body p,
:root[data-ap~="body_italic"] .synn-body label,
:root[data-ap~="body_italic"] .synn-body input,
:root[data-ap~="body_italic"] .synn-body select,
:root[data-ap~="body_italic"] .synn-body textarea,
:root[data-ap~="body_italic"] .e-input,
:root[data-ap~="body_italic"] .e-input-group input { font-style: var(--ap-body-italic); }
:root[data-ap~="body_color"] body,
:root[data-ap~="body_color"] .synn-body p,
:root[data-ap~="body_color"] .synn-body label,
:root[data-ap~="body_color"] .synn-body input,
:root[data-ap~="body_color"] .synn-body select,
:root[data-ap~="body_color"] .synn-body textarea,
:root[data-ap~="body_color"] .e-input,
:root[data-ap~="body_color"] .e-input-group input { color: var(--ap-body-color); }
:root[data-ap~="body_size"] { --fs-body: var(--ap-body-size); --fs-md: var(--ap-body-size); }
/* ── Типографика: th ── */
:root[data-ap~="th_size"] .e-grid .e-headercell .e-headertext,
:root[data-ap~="th_size"] .e-grid .e-headercell,
:root[data-ap~="th_size"] .synn-body table th { font-size: var(--ap-th-size); }
:root[data-ap~="th_weight"] .e-grid .e-headercell .e-headertext,
:root[data-ap~="th_weight"] .e-grid .e-headercell,
:root[data-ap~="th_weight"] .synn-body table th { font-weight: var(--ap-th-weight); }
:root[data-ap~="th_italic"] .e-grid .e-headercell .e-headertext,
:root[data-ap~="th_italic"] .e-grid .e-headercell,
:root[data-ap~="th_italic"] .synn-body table th { font-style: var(--ap-th-italic); }
:root[data-ap~="th_color"] .e-grid .e-headercell .e-headertext,
:root[data-ap~="th_color"] .e-grid .e-headercell,
:root[data-ap~="th_color"] .synn-body table th { color: var(--ap-th-color); }
:root[data-ap~="th_color"] .e-grid .e-headercell .e-headertext { color: var(--ap-th-color); }
/* ── Типографика: td ── */
:root[data-ap~="td_size"] .e-grid .e-rowcell,
:root[data-ap~="td_size"] .e-grid .e-row .e-rowcell a,
:root[data-ap~="td_size"] .synn-body table td { font-size: var(--ap-td-size); }
:root[data-ap~="td_weight"] .e-grid .e-rowcell,
:root[data-ap~="td_weight"] .e-grid .e-row .e-rowcell a,
:root[data-ap~="td_weight"] .synn-body table td { font-weight: var(--ap-td-weight); }
:root[data-ap~="td_italic"] .e-grid .e-rowcell,
:root[data-ap~="td_italic"] .e-grid .e-row .e-rowcell a,
:root[data-ap~="td_italic"] .synn-body table td { font-style: var(--ap-td-italic); }
:root[data-ap~="td_color"] .e-grid .e-rowcell,
:root[data-ap~="td_color"] .e-grid .e-row .e-rowcell a,
:root[data-ap~="td_color"] .synn-body table td { color: var(--ap-td-color); }
/* ── Типографика: menu1 ── */
:root[data-ap~="menu1_size"] .synn-section,
:root[data-ap~="menu1_size"] .synn-section .ico { font-size: var(--ap-menu1-size); }
:root[data-ap~="menu1_weight"] .synn-section,
:root[data-ap~="menu1_weight"] .synn-section .ico { font-weight: var(--ap-menu1-weight); }
:root[data-ap~="menu1_italic"] .synn-section,
:root[data-ap~="menu1_italic"] .synn-section .ico { font-style: var(--ap-menu1-italic); }
:root[data-ap~="menu1_color"] .synn-section,
:root[data-ap~="menu1_color"] .synn-section .ico { color: var(--ap-menu1-color); }
/* ── Типографика: menu2 ── */
:root[data-ap~="menu2_size"] .synn-commands a { font-size: var(--ap-menu2-size); }
:root[data-ap~="menu2_weight"] .synn-commands a { font-weight: var(--ap-menu2-weight); }
:root[data-ap~="menu2_italic"] .synn-commands a { font-style: var(--ap-menu2-italic); }
:root[data-ap~="menu2_color"] .synn-commands a { color: var(--ap-menu2-color); }
/* ── Типографика: menugroup ── */
:root[data-ap~="menugroup_size"] .synn-commands .nav-section-title,
:root[data-ap~="menugroup_size"] .synn-commands .nav-group-head,
:root[data-ap~="menugroup_size"] .synn-commands .nav-group-title,
:root[data-ap~="menugroup_size"] .synn-commands .title { font-size: var(--ap-menugroup-size); }
:root[data-ap~="menugroup_weight"] .synn-commands .nav-section-title,
:root[data-ap~="menugroup_weight"] .synn-commands .nav-group-head,
:root[data-ap~="menugroup_weight"] .synn-commands .nav-group-title,
:root[data-ap~="menugroup_weight"] .synn-commands .title { font-weight: var(--ap-menugroup-weight); }
:root[data-ap~="menugroup_italic"] .synn-commands .nav-section-title,
:root[data-ap~="menugroup_italic"] .synn-commands .nav-group-head,
:root[data-ap~="menugroup_italic"] .synn-commands .nav-group-title,
:root[data-ap~="menugroup_italic"] .synn-commands .title { font-style: var(--ap-menugroup-italic); }
:root[data-ap~="menugroup_color"] .synn-commands .nav-section-title,
:root[data-ap~="menugroup_color"] .synn-commands .nav-group-head,
:root[data-ap~="menugroup_color"] .synn-commands .nav-group-title,
:root[data-ap~="menugroup_color"] .synn-commands .title { color: var(--ap-menugroup-color); }
/* ── Типографика: menuactive ── */
:root[data-ap~="menuactive_size"] .synn-section.active,
:root[data-ap~="menuactive_size"] .synn-commands a.active { font-size: var(--ap-menuactive-size); }
:root[data-ap~="menuactive_weight"] .synn-section.active,
:root[data-ap~="menuactive_weight"] .synn-commands a.active { font-weight: var(--ap-menuactive-weight); }
:root[data-ap~="menuactive_italic"] .synn-section.active,
:root[data-ap~="menuactive_italic"] .synn-commands a.active { font-style: var(--ap-menuactive-italic); }
:root[data-ap~="menuactive_color"] .synn-section.active,
:root[data-ap~="menuactive_color"] .synn-commands a.active { color: var(--ap-menuactive-color); }
/* ── Типографика: button ── */
:root[data-ap~="button_size"] .e-btn,
:root[data-ap~="button_size"] .e-btn .e-btn-text,
:root[data-ap~="button_size"] button.topbar-btn { font-size: var(--ap-button-size); }
:root[data-ap~="button_weight"] .e-btn,
:root[data-ap~="button_weight"] .e-btn .e-btn-text,
:root[data-ap~="button_weight"] button.topbar-btn { font-weight: var(--ap-button-weight); }
:root[data-ap~="button_italic"] .e-btn,
:root[data-ap~="button_italic"] .e-btn .e-btn-text,
:root[data-ap~="button_italic"] button.topbar-btn { font-style: var(--ap-button-italic); }
:root[data-ap~="button_color"] .e-btn,
:root[data-ap~="button_color"] .e-btn .e-btn-text,
:root[data-ap~="button_color"] button.topbar-btn { color: var(--ap-button-color); }

/* ── Меню 1-го уровня ── */
:root[data-ap~="m1_bg"] .synn-sections { background: var(--ap-m1-bg); }
:root[data-ap~="m1_height"] .synn-sections { height: var(--ap-m1-height); }
:root[data-ap~="m1_active"] .synn-section.active::before { background: var(--ap-m1-active); }
:root[data-ap~="m1_active"] .synn-section.active .ico { color: var(--ap-m1-active); }

/* ── Меню 2-го уровня и подменю ── */
:root[data-ap~="m2_bg"] .synn-commands { background: var(--ap-m2-bg); }
:root[data-ap~="m2_width"] .synn-shell { grid-template-columns: var(--ap-m2-width) 1fr; }
:root[data-ap~="m2_hover"] .synn-commands a:is(:hover, :focus-visible), :root[data-ap~="m2_hover"] .synn-commands .nav-group-head:is(:hover, :focus-visible) { background: var(--ap-m2-hover); }
:root[data-ap~="m2_selected"] .synn-commands a.active { background: var(--ap-m2-selected); }
:root[data-ap~="m2_density"] .synn-commands a { padding: var(--ap-m2-density); }
:root[data-ap~="m2_icons_hide"] .synn-commands .nav-cmd-ico { display: none; }

/* Узкий экран: колонка меню выезжает панелью — ширина из настройки не нужна. */
@media (max-width: 760px) { :root[data-ap~="m2_width"] .synn-shell { grid-template-columns: 1fr; } }