/* Фирменный стиль «Инпром Эстейт»: синяя шапка с логотипом, обложка страниц входа, печать.
   Подключается после app.css (и стилей страницы) и перекрашивает его шапку. Цвета — переменные из app.css.
   Логотип по брендбуку: на синем — только белый, фон под ним ровный, пропорции не меняются,
   вокруг — свободное поле. Отдельно знак — только официальный квадратный файл (на телефоне). */

/* ---------- Шапка ---------- */

.topbar {
  background: var(--brand);
  border-bottom: 0;
  color: #fff;
  padding-top: 0;
  padding-bottom: 0;
}
.brand { gap: 0; color: #fff; font-weight: 600; }
.brand:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
/* 28px логотипа + по 12px поля сверху и снизу = 52px — высота шапки не меняется. */
.brand-logo { display: block; flex: none; width: auto; height: 28px; margin: 12px 0; }
.brand-sign { display: none; }
/* Название продукта отделено от логотипа тонкой линией и полем не меньше высоты прописной буквы. */
.brand .brand-name { margin-left: 1.1rem; padding-left: 1.1rem; border-left: 1px solid rgba(255, 255, 255, .5); line-height: 1.3; }

/* Плашка демо: светло-жёлтая — заметна на синем, текст 8:1. */
.topbar .badge-demo, .cover .badge-demo { background: #ffe9a8; color: #5c3d00; }

.topbar .who-name { color: #fff; }
.topbar .who-role { color: var(--accent-soft); }  /* 4,6:1 на синем */
.topbar .link-button { color: #fff; text-underline-offset: 3px; }
.topbar .link-button:hover { text-decoration-thickness: 2px; }
.topbar .link-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }

/* Кнопка меню (её разметку и показ задаёт nav.css): белая иконка 40×40 на синем. */
.topbar .burger {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  line-height: 0;
  cursor: pointer;
}
.topbar .burger svg { display: block; width: 24px; height: 24px; }
.topbar .burger:hover, .topbar .burger[aria-expanded="true"] { background: rgba(255, 255, 255, .16); }
.topbar .burger:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 1180px) {
  /* Ноутбук с меню слева: плашка демо — коротко, чтобы шапка оставалась в одну строку. */
  .topbar .demo-flag-long { display: none; }
  .topbar .demo-flag-short { display: inline; }
}

@media (max-width: 800px) {
  /* Телефон: вместо широкого логотипа — официальный квадратный знак на белом кружке и название не больше
     чем в две строки («Контроль / регламентных работ» — 136px при 13px). */
  .topbar { gap: .5rem; }
  .brand-logo { display: none; }
  .brand-sign { display: block; flex: none; width: 32px; height: 32px; padding: 4px; border-radius: 50%; background: #fff; }
  .brand .brand-name {
    margin-left: .5rem; padding-left: 0; border-left: 0;
    font-size: .8125rem; line-height: 1.15; white-space: normal; text-wrap: balance;
  }
}
@media (max-width: 374px) {
  /* Совсем узкий экран: плашку демо в шапке убираем — про условные данные говорит подвал. */
  .topbar .demo-flag { display: none; }
}

/* ---------- Обложка страниц до входа ---------- */

/* Страница до входа: обложка сверху, подвал прижат к низу экрана. */
body:has(> .cover) { display: flex; flex-direction: column; min-height: 100vh; }
/* position + isolation — для светлых полос «бланка» в углу (ниже). */
.cover ~ .layout { flex: 1 0 auto; min-height: 0; position: relative; isolation: isolate; }

.cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--brand);
  color: #fff;
}
/* Фирменный мотив — наклонные полосы «этажей здания» в правом нижнем углу: голубой клин и белые полосы на нём. */
.cover::before, .cover::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  width: min(620px, 62%);
  height: 100%;
  clip-path: polygon(34% 100%, 100% 8%, 100% 100%);
  pointer-events: none;
}
.cover::before { background: var(--brand-2); opacity: .55; }
.cover::after {
  background: repeating-linear-gradient(172deg, transparent 0 13px, rgba(255, 255, 255, .2) 13px 21px);
  clip-path: polygon(46% 100%, 100% 26%, 100% 100%);
}
.cover-inner { position: relative; max-width: 760px; margin: 0 auto; padding: 2.25rem 1.5rem 2.5rem; }
/* Поле вокруг логотипа залито тем же синим: полосы под логотип не заходят. */
.cover-logo { display: inline-block; margin: -14px; padding: 14px; background: var(--brand); border-radius: 2px; }
.cover-logo:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.cover-logo img { display: block; width: auto; height: 56px; }
.cover-lead { position: relative; margin: 1.5rem 0 0; max-width: 31rem; font-size: 1.1rem; line-height: 1.45; }
.cover-lead .brand-name { font-weight: 700; white-space: normal; }
.cover-demo { margin: 1rem 0 0; }

@media (max-width: 800px) {
  .cover-inner { padding: 1.5rem 1rem 2.75rem; }
  .cover-logo { margin: -10px; padding: 10px; }
  .cover-logo img { height: auto; width: min(300px, 100%); }
  .cover-lead { margin-top: 1.1rem; max-width: 22rem; font-size: 1rem; }
  /* На узком экране полосы — только в самом углу, в нижнем поле: не под логотипом и не под текстом. */
  .cover::before, .cover::after { width: 58%; height: 2.6rem; }
  .cover::before { clip-path: polygon(0 100%, 100% 0, 100% 100%); }
  .cover::after { clip-path: polygon(22% 100%, 100% 14%, 100% 100%); }
}

/* Под обложкой — как фирменный бланк: светлые полосы в правом нижнем углу (на широком экране, вне текста). */
.cover ~ .layout::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  width: min(440px, 28%);
  height: 240px;
  background: repeating-linear-gradient(172deg, transparent 0 13px, #e1e9f3 13px 21px);
  clip-path: polygon(30% 100%, 100% 12%, 100% 100%);
  pointer-events: none;
}
@media (max-width: 1180px) {
  .cover ~ .layout::after { display: none; }
}

/* Формы до входа (вход, восстановление пароля, первый администратор) — белой карточкой на светлом фоне. */
.cover ~ .layout .form { padding: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
@media (max-width: 480px) {
  .cover ~ .layout .form { padding: 1rem; }
}

/* ---------- Печать: без шапки, обложки и кнопки меню ---------- */

@media print {
  .topbar, .cover, .burger { display: none !important; }
  body { background: #fff; }
}