/* ==========================================================================
   Новый вид: обложка кабинета поверх дизайн-системы
   --------------------------------------------------------------------------
   components.css даёт меню, панель и страницу. Здесь только то, что
   нужно нашим данным: логотип школы вместо буквы, значки меню из
   core/_icon.html, длинное название школы, заголовок в панели.
   ========================================================================== */

/* Логотип и название школы */
.app-brand-link {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
  color: inherit;
}
.app-brand-link:hover { color: inherit; }
.app-brand-logo { overflow: hidden; }
.app-brand-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 10.5rem; font-size: 1.125rem; }

/* Логотип школы своей шириной (ui2/_menu_brand.html, там причины).
 *
 * Ссылка тянется и сжимается, кнопка-булавка — нет: при любом логотипе
 * кнопка остаётся на месте, а логотип уменьшается, но не лезет под неё.
 * Высота 1.75rem, а не 2: вытянутый логотип при 2rem у IT-Ontime
 * выходил шириной 146 из 176 доступных, и до кнопки оставалось шесть
 * точек — глаз читал их как одно целое.
 *
 * `display` у картинок здесь НЕ ЗАДАЁТСЯ намеренно: у школы с тёмным
 * вариантом логотипа их две, и одну прячет `.логотип-тёмный`. Заданный
 * здесь `display: block` перебил бы его, и логотипов стало бы два. */
.app-brand-link { flex: 1 1 auto; }
.app-brand-toggle { flex: none; }
.app-brand-wordmark { display: flex; align-items: center; min-width: 0; height: 2rem; }
.app-brand-wordmark img {
  height: 1.75rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
/* Знак школы виден только в свёрнутом меню */
.app-brand-mark { display: none; }
@media (min-width: 1200px) {
  [data-nav="compact"] .app-menu:is(:not(:hover), .is-hover-locked) .app-brand-wordmark { display: none; }
  [data-nav="compact"] .app-menu:is(:not(:hover), .is-hover-locked) .app-brand-mark { display: grid; }
}
/* Тёмный вариант логотипа школы (core/_school_logo.html) */
.логотип-тёмный { display: none; }
[data-bs-theme="dark"] .логотип-светлый { display: none; }
[data-bs-theme="dark"] .логотип-тёмный { display: block; }

/* Значки пунктов меню приходят разметкой из core/_icon.html и соседей */
.menu-icon { display: inline-grid; place-items: center; }
.menu-icon > svg { width: 100%; height: 100%; }

/* Заголовок в панели: страницы могут положить сюда своё */
.navbar-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--bs-heading-color);
  font-weight: var(--fw-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Кружок человека в панели: 40px, как у Vuexy */
.navbar-avatar .avatar { width: 2.5rem; height: 2.5rem; font-size: 0.9375rem; }
.dropdown-profile { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem; }
.dropdown-profile .min-w-0 { min-width: 0; }

/* Сообщения над страницей */
.app-content > .alert { margin-bottom: 1.5rem; }

/* Полосы над страницей ученика: демонстрация и подмена */
.app-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  width: calc(100% - var(--gutter) * 2);
  max-width: calc(var(--content-max) - var(--gutter) * 2);
  /* Прижата к меню, как страница и панель над ней (components.css,
     правка соседней сессии 05.10: «страница прижата к меню»). Там же
     записано, что полосы ждут, — файл был под моим замком. По центру
     на широком экране полоса уезжала вправо от страницы под ней. */
  margin: 1rem auto 0 var(--gutter);
  padding: 0.75rem 1rem;
  border-radius: var(--bs-border-radius);
  font-size: 0.875rem;
}
.app-strip-info { background: color-mix(in srgb, var(--bs-info) var(--tint), var(--paper)); color: var(--bs-info-text-emphasis); }
.app-strip-warning { background: color-mix(in srgb, var(--bs-warning) var(--tint), var(--paper)); color: var(--bs-warning-text-emphasis); }
.app-strip form { margin: 0; }
/* у гостя нет панели, и полоса оказывалась под размытием .app-page::before */
.app-strip { position: relative; z-index: 1002; }

/* Вход и регистрация (Vuexy «basic») */
.auth2 {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 1.5rem 1rem;
  background: var(--bs-body-bg);
}
.auth2-col { width: 100%; max-width: 28.75rem; }
.auth2-card > .card-body { padding: 2.5rem; }
@media (max-width: 575.98px) { .auth2-card > .card-body { padding: 1.5rem; } }
.auth2-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  color: var(--bs-heading-color);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.auth2-brand svg { width: 2.25rem; height: 2.25rem; flex-shrink: 0; }
.auth2-below { margin-top: 1rem; color: var(--bs-body-color); text-align: center; }
.auth2-below:empty { display: none; }
.auth2-platform { margin-top: 1rem; color: var(--bs-secondary-color); font-size: 0.8125rem; text-align: center; }

/* «Настройки» в меню: строка ведёт на страницу, стрелка раскрывает список.
   Два действия на двух элементах, как в старом меню (решение 24.08);
   у Vuexy вся строка только раскрывает. */
.menu-split { position: relative; }
.menu-split > .menu-link { padding-inline-end: 2.75rem; }
.menu-caret {
  position: absolute;
  top: 0;
  inset-inline-end: 0.75rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--bs-border-radius);
  background: transparent;
  color: var(--menu-color);
  cursor: pointer;
}
.menu-caret::after {
  content: "";
  width: 1.375rem;
  height: 1.375rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 6l6 6l-6 6'/%3E%3C/svg%3E") center / 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 6l6 6l-6 6'/%3E%3C/svg%3E") center / 100% no-repeat;
  transition: transform var(--duration-slow) ease;
}
.menu-caret:hover { background: var(--menu-hover-bg); }
.menu-caret:focus-visible { box-shadow: 0 0 0 0.2rem var(--ring); outline: 0; }
.menu-item.is-open > .menu-caret::after { transform: rotate(90deg); }
.menu-item.active > .menu-caret { color: var(--primary-contrast); }
/* Стрелка стоит на правом, прозрачном краю градиента: там подложка
   сплошная, иначе в тёмной теме тёмная стрелка на тёмном 2.8:1 */
.menu-split.active > .menu-link { background: var(--bs-primary) !important; }
.menu-item.active > .menu-caret:hover { background: rgb(255 255 255 / 0.16); }
@media (min-width: 1200px) {
  [data-nav="compact"] .app-menu:is(:not(:hover), .is-hover-locked) .menu-caret { opacity: 0; pointer-events: none; }
}

/* Разделов-групп в меню нет с 08.10.2026 (решение владельца): меню
   плоское, одни пункты. Стили групп и кнопки «свернуть/развернуть всё»
   удалены вместе с разметкой (core/cabinet.html нового вида). */

/* ------------------------------------- наведение: контур цвета школы
 *
 * Замечание владельца 05.10: при наведении только светлел шрифт, а
 * хотелось, чтобы строка выделялась «акцентным цветом по контуру,
 * блёкло, но заметно, в тоне акцентного цвета». Одно правило на всё
 * меню: пункты и кабинет ученика.
 *
 * Контур — из --primary-text, а не из --bs-primary, и это не опечатка.
 * Лайм на белом почти не виден: сам цвет школы светлый. --primary-text
 * у каждой гаммы подобран под фон темы (тёмно-оливковый на светлой,
 * яркий лайм на тёмной) — им контур читается в обеих темах. Заливка
 * из самого цвета школы, восемь процентов: тон есть, крика нет.
 *
 * Замерено на всех шести цветах школы: контур к фону меню 2.0–2.4 на
 * светлой теме и 2.4–3.6 на тёмной. «Блёкло, но заметно» — это оно:
 * линию видно, но она тише текущего пункта со сплошной заливкой.
 * Заливка сама по себе почти не видна (1.02–1.23) и даёт только тон.
 *
 * Текущий пункт подсветку не получает: у него своя сплошная заливка,
 * и правило активного пункта сильнее этого по весу селектора.
 */
.app-menu .menu-link:hover {
  background: color-mix(in srgb, var(--bs-primary) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-text) 45%, transparent);
  color: var(--menu-color);
}
.app-menu .menu-link:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--ring);
}