/*
  Оболочка AdDrive (С-57): шапка, боковая навигация, основная область,
  выпадающие меню на <details>, страница входа.

  Сетка: ≥ 1024 px — шапка во всю ширину, под ней боковая панель 240 px и
  основная область до 1280 px; < 1024 px — панели нет, навигация уходит в
  раскрываемое «Меню» во второй строке шапки. Страница не прокручивается
  горизонтально ни при какой ширине (FR-030-39).

  Цвета и гарнитуры — только var(--…); тени не применяются: меню — это
  поверхность уровня 2 (--surface-raised) с границей (раздел 03.1).
*/

:root {
  --shell-h: 56px;
  --sidebar-w: 240px;
}

/* --- Каркас ----------------------------------------------------------- */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
  min-height: calc(100vh - 31px);
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  transform: translateY(-200%);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-s);
  background: var(--surface-raised);
  color: var(--accent);
  font: 500 15px/20px var(--font-ui);
}

.skip-link:focus {
  position: absolute;
  left: var(--space-2);
  transform: none;
}

/* Плашка демо-стенда (С-45) в стиле предупреждения брендбука: узкая,
   спокойная, значок-треугольник + слово. Не закрывается: это свойство
   стенда, а не уведомление. */
.demo-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  max-width: none;
  padding: 6px var(--space-4);
  background: var(--warn-bg);
  color: var(--warn-text);
  border-bottom: 1px solid var(--warn-border);
  font: 500 13px/18px var(--font-ui);
  text-align: center;
}

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

.shell {
  grid-area: header;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  min-height: var(--shell-h);
  padding: 0 var(--space-4) 0 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  flex: none;
  width: var(--sidebar-w);
  padding: 0 var(--space-5);
  border-right: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}

.brand .mark {
  color: var(--accent);
}

/* Тёмная шапка — логотип монохромом (брендбук, раздел 07). */
:root[data-theme="dark"] .brand .mark {
  color: var(--text);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .mark {
    color: var(--text);
  }
}

.brand-word {
  font: 600 20px/1 var(--font-heading);
  letter-spacing: -0.02em;
}

.brand:hover {
  color: var(--text);
}

/* --- Выпадающие меню на <details> ------------------------------------- */

.menu {
  position: relative;
}

.menu > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-m);
  cursor: pointer;
  list-style: none;
}

.menu > summary::-webkit-details-marker {
  display: none;
}

.menu > summary:hover {
  background: var(--surface-raised);
}

.menu > summary > .icon {
  color: var(--text-muted);
}

.menu[open] > summary > .icon {
  transform: rotate(180deg);
}

.menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: 320px;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: var(--space-2);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
}

/* Закрытое меню не занимает места и не расширяет страницу: в части
   движков содержимое закрытого <details> всё равно проходит раскладку. */
.menu:not([open]) > .menu-panel {
  display: none;
}

.menu-panel .client-option:hover {
  background: var(--accent-soft);
}

.menu-caption {
  padding: var(--space-2) var(--space-3) var(--space-1);
  margin: 0;
}

.menu-foot {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3) var(--space-1);
  border-top: 1px solid var(--border);
  font: var(--type-small);
}

/* Переключатель клиента: текущий клиент — крупно, рядом с логотипом. */
.switcher {
  margin-left: var(--space-3);
  min-width: 0;
}

.switcher > summary {
  padding: 6px var(--space-3);
}

.switcher-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.switcher-text .label {
  margin: 0;
  line-height: 14px;
}

.client-name {
  display: block;
  max-width: 44ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 17px/22px var(--font-ui);
  color: var(--text);
}

/* Меню пользователя: круг с буквой адреса, внутри — адрес, тема, выход. */
.user-menu {
  margin-left: auto;
}

.user-menu > summary {
  padding: var(--space-1) 6px var(--space-1) var(--space-1);
}

.user-menu .menu-panel {
  left: auto;
  right: 0;
  width: 300px;
  padding: var(--space-3);
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font: 600 14px/1 var(--font-ui);
}

.menu-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.menu-who .label {
  margin: 0;
}

.login-email {
  font: 500 15px/20px var(--font-ui);
  color: var(--text);
  overflow-wrap: anywhere;
}

.theme-switch .label {
  margin: 0 0 6px;
}

.segmented {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.btn-segment {
  flex: 1 1 0;
  min-height: 30px;
  padding: 0 var(--space-2);
  border: 0;
  background: transparent;
  color: var(--text-secondary);
}

.btn-segment:hover {
  background: var(--surface-raised);
  color: var(--text);
}

.btn-segment[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.logout {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}

.logout .btn {
  margin-left: calc(var(--space-2) * -1);
}

/* --- Навигация -------------------------------------------------------- */

.sidebar {
  grid-area: sidebar;
  position: sticky;
  top: var(--shell-h);
  align-self: start;
  height: calc(100vh - var(--shell-h));
  overflow-y: auto;
  padding: var(--space-3) var(--space-3) var(--space-4);
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.sidebar .nav {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.nav-group {
  margin: var(--space-5) var(--space-3) 6px;
}

.nav-group:first-child {
  margin-top: var(--space-2);
}

.nav ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  overflow: visible;
}

/* Общий app.css рисует ссылки навигации строкой с охряным подчёркиванием
   активной; в боковой панели активную отмечает подложка и петрольная черта. */
.nav a.nav-item {
  display: flex;
  padding: 0 var(--space-3);
  border-bottom: 0;
  white-space: nowrap;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-s);
  color: var(--text-secondary);
  font: 500 14px/20px var(--font-ui);
  text-decoration: none;
}

.nav-item:hover {
  background: var(--surface-raised);
  color: var(--text);
}

.nav-item[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* Петрольная черта активного пункта. */
.nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 2px;
  border-radius: 1px;
  background: var(--accent);
}

.nav-soon {
  color: var(--text-muted);
}

.nav-soon .chip {
  margin-left: auto;
  font-size: 10px;
}

.nav-footer {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.sidebar .nav-footer {
  margin-top: auto;
}

.nav-mobile {
  display: none;
}

/* --- Основная область ------------------------------------------------- */

.app-shell > main {
  grid-area: main;
  min-width: 0;
  padding: var(--space-6) var(--space-7) var(--space-9);
}

.screen {
  max-width: var(--content-max);
}

.screen-head {
  margin: 0 0 var(--space-5);
}

.screen-head h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font: var(--type-h2);
  letter-spacing: -0.018em;
}

.screen-head .lead {
  margin: var(--space-2) 0 0;
  max-width: var(--measure-max);
  color: var(--text-secondary);
}

/* «Скоро»: что будет на экране и когда. */
.soon {
  max-width: 720px;
}

.soon-list {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.soon-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--text-secondary);
}

.soon-list .icon {
  margin-top: 3px;
  color: var(--text-muted);
}

.soon-when {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.soon-when p:last-child {
  margin: 0;
}

/* «Данные»: сигналы и действия. */
.signal-list {
  display: grid;
  gap: 0;
}

.signal {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}

.signal:first-child {
  padding-top: 0;
  border-top: 0;
}

.signal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
}

.signal p {
  margin-bottom: var(--space-1);
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-3);
}

.action-row:last-child {
  margin-bottom: 0;
}

.admin-grid .card p:last-child {
  margin-bottom: 0;
}

/* --- Вход и страницы без оболочки ------------------------------------- */

main.main-bare {
  padding: 0;
}

.screen-bare {
  max-width: 640px;
  margin: var(--space-9) auto;
  padding: 0 var(--space-4);
}

.login-page {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  min-height: calc(100vh - 32px);
}

.login-aside {
  display: flex;
  align-items: center;
  padding: var(--space-9);
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.login-aside-inner {
  max-width: 560px;
}

.login-statement {
  margin: var(--space-3) 0 var(--space-6);
  font: var(--type-display);
  letter-spacing: var(--tracking-display);
  color: var(--text);
  text-wrap: balance;
}

.login-points {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-7);
}

.login-points li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--text-secondary);
}

.login-points .status-mark {
  margin-top: 4px;
  color: var(--ok);
}

/* Паттерн «строки сводки» (раздел 05): линованный лист, шаг 16 px, охряная
   черта — итоговая строка. Только декор: текста на нём нет. */
.ledger {
  display: grid;
  max-width: 420px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--bg);
  overflow: hidden;
}

.ledger span {
  display: block;
  height: 16px;
  border-bottom: 1px solid var(--border);
}

.ledger span:last-child {
  border-bottom: 0;
}

.ledger span.ledger-total {
  border-bottom: 2px solid var(--ochre);
}

.login-card-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-7) var(--space-4);
}

.login-card {
  width: 100%;
  max-width: 400px;
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 var(--space-6);
  font: 600 30px/1 var(--font-heading);
  letter-spacing: -0.022em;
  color: var(--text);
}

.login-logo .mark {
  color: var(--accent);
}

.login-card .lead {
  margin: 0 0 var(--space-6);
  color: var(--text-secondary);
}

.login-card form {
  margin: 0 0 var(--space-4);
}

.login-note {
  margin: 0;
  color: var(--text-muted);
}

/* --- Узкий экран ------------------------------------------------------ */

@media (max-width: 1023px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "main";
  }

  .sidebar {
    display: none;
  }

  .shell {
    position: relative;
    flex-wrap: wrap;
    gap: 0 var(--space-1);
    padding: var(--space-2) var(--space-3) 0;
  }

  .brand {
    width: auto;
    align-self: center;
    padding: 0 var(--space-2) 0 var(--space-1);
    border-right: 0;
  }

  .switcher {
    flex: 1 1 0;
    margin-left: 0;
  }

  .switcher > summary {
    padding: var(--space-1) var(--space-2);
  }

  .client-name {
    max-width: 100%;
    font-size: 15px;
    line-height: 20px;
  }

  /* Меню раскрываются во всю ширину шапки, а не от своей кнопки: иначе
     панель у правого края вылезла бы за экран. */
  .menu {
    position: static;
  }

  .menu-panel,
  .user-menu .menu-panel {
    top: 56px;
    left: var(--space-3);
    right: var(--space-3);
    width: auto;
  }

  .nav-mobile {
    display: block;
    flex: 1 0 100%;
    order: 10;
    margin: var(--space-2) calc(var(--space-3) * -1) 0;
    padding: 0 var(--space-3);
    border-top: 1px solid var(--border);
  }

  .nav-mobile > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    color: var(--text);
    font: 500 15px/20px var(--font-ui);
    cursor: pointer;
    list-style: none;
  }

  .nav-mobile > summary::-webkit-details-marker {
    display: none;
  }

  .nav-mobile-current {
    color: var(--text-secondary);
  }

  .nav-mobile .nav {
    padding: 0 0 var(--space-3);
  }

  .nav-mobile .nav-group:first-child {
    margin-top: 0;
  }

  .app-shell > main {
    padding: var(--space-5) var(--space-4) var(--space-8);
  }

  .screen-head h1 {
    font-size: 24px;
    line-height: 30px;
  }

  .login-page {
    grid-template-columns: minmax(0, 1fr);
  }

  .login-aside {
    display: none;
  }
}

@media (max-width: 479px) {
  .brand-word {
    display: none;
  }

  .card {
    padding: var(--space-4);
  }

  .table-scroll {
    margin: 0 calc(var(--space-4) * -1);
    padding: 0 var(--space-4);
  }

  .empty-state,
  .empty {
    padding: var(--space-5) var(--space-4);
  }
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}