/* layout.css — подэтап D.2: каркас приложения (design-plan.md §1–§2).
   Хедер, сайдбар, контент, тулбар, панель столбцов, адаптив.
   Здесь единственное место, где задаётся «скелет» экрана: высота шапки,
   ширина сайдбара, отступы контента. Ни одного hex-цвета — только var(--…).
   Подключается после base.css и ДО файлов компонентов (table/drawer/search/filters):
   их селекторы специфичнее и осознанно переопределяют каркас. */

/* ── Каркас: шапка + контент во всю высоту ───────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;              /* мобильные браузеры: высота без адресной строки */
}

/* .app-container и есть «главный экран»: flex-колонка на всю высоту.
   Внутри — шапка фиксированной высоты и .app-content, который забирает остаток. */
.app-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100vh;
  height: 100dvh;
  background-color: transparent;
}

/* Скрытие главного экрана атрибутом hidden.
   ВАЖНО: без этого правила `display: flex` выше (специфичность класса, тот же вес,
   но layout.css подключён ПОСЛЕ base.css с его `[hidden]`) перебивает скрытие —
   и кабинет остаётся видимым под экраном логина (скролл вниз показывал пустые данные).
   Такие же правила уже есть ниже для .sidebar-section[hidden] и .action-button[hidden]. */
.app-container[hidden] {
  display: none;
}

.app-content {
  display: flex;
  flex: 1 1 auto;
  /* Высоту задаём явно от токена шапки: .app-container — «главный экран» с display:block,
     поэтому flex-остаток здесь не считается, как в обычной flex-колонке. */
  height: calc(100vh - var(--header-height));
  height: calc(100dvh - var(--header-height));
  min-height: 0;               /* без этого детей нельзя прокручивать отдельно */
  overflow: hidden;
}

/* ── Шапка: светлая, 48px, разделитель линией вместо тени ────────────── */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex: 0 0 auto;
  height: var(--header-height);
  padding: 0 var(--space-4);
  background-color: var(--bg);
  color: var(--text);
  border-bottom: 2px solid var(--teal);
  box-shadow: var(--shadow-none);
  z-index: var(--z-sticky);
}

.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.header-left {
  gap: var(--space-3);
}

/* Логотип бренда в шапке (изображение). Шапка 48px, поэтому логотип компактный. */
.header-logo-img {
  height: 60px;
  width: auto;
  display: block;
  flex: 0 0 auto;
}

/* Название приложения: роль «бренд» — 14px, 600, без «дерзкой» крупности */
.app-title {
  margin: 0;
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--text);
  white-space: nowrap;
}

/* Имя пользователя: вторичный текст 13px */
.user-info {
  font-size: var(--fs-13);
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

/* «Выйти» — кнопка-контур Notion (не красная заливка: красный оставляем ошибкам) */
.logout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: var(--control-height-sm);
  padding: 0 var(--space-3);
  font-family: inherit;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--text);
  background-color: var(--bg);
  border: var(--line-1) solid var(--border-field);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.logout-button:hover {
  background-color: var(--bg-hover);
}

.logout-button .icon,
.logout-icon {
  color: currentColor;
  vertical-align: middle;
}

.logout-button:active {
  background-color: var(--bg-panel);
}

/* Переключатель темы: квадратная кнопка-иконка в шапке (D.8) */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height-sm);
  height: var(--control-height-sm);
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-14);
  line-height: 1;
  color: var(--text-2);
  background-color: transparent;
  border: var(--line-1) solid var(--border-field);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.theme-toggle:hover {
  color: var(--text);
  background-color: var(--bg-hover);
}

.theme-toggle-icon {
  line-height: 1;
}

/* ── Сайдбар 260px: панельный фон, линия справа, свои отступы ───────── */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width);
  padding: var(--space-3) var(--space-2);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-right: var(--line-1) solid var(--border);
  overflow-y: auto;
}

.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Иконки в боковой панели — на 50% крупнее обычных (24px вместо 16px):
   поиск, «+ Новая база», шаблоны, пункты администрирования. */
.sidebar .icon {
  width: var(--sidebar-icon-size);
  height: var(--sidebar-icon-size);
}

/* Скрытие секции атрибутом hidden: правило display:flex выше сильнее [hidden] из base.css
   (layout.css подключён позже), поэтому явно гасим показ (нужно для роли «пользователь»). */
.sidebar-section[hidden] {
  display: none;
}

/* Заголовок группы: 12px, 500, третичный — как подписи в Notion */
.sidebar-title {
  margin: var(--space-2) var(--space-2) var(--space-1);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-3);
}

.databases-list,
.views-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.loading-text {
  padding: var(--space-2);
  font-size: var(--fs-13);
  color: var(--text-3);
  text-align: left;
}

/* Кнопки сайдбара: «+ Новая база», «+ Новый шаблон», «Админ-панель» */
.sidebar-button,
.admin-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  width: 100%;
  height: var(--control-height);
  margin-top: var(--space-1);
  padding: 0 var(--space-2);
  font-family: inherit;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  background-color: transparent;
  border: 0;
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

/* Скрытие кнопок сайдбара атрибутом hidden (см. пояснение выше у .sidebar-section[hidden]). */
.sidebar-button[hidden],
.admin-button[hidden] {
  display: none;
}

.sidebar-button:hover:not(:disabled),
.admin-button:hover:not(:disabled) {
  color: var(--text);
  background-color: var(--bg-hover);
}

.sidebar-button:disabled,
.admin-button:disabled {
  color: var(--text-3);
  background-color: transparent;
  cursor: not-allowed;
}

/* ── Контент: заголовок вида + тулбар + таблица ────────────────────── */
.main-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-4) var(--space-6) var(--space-6);
  background-color: transparent;
  overflow-y: auto;
}

/* Строка заголовка: название вида слева, действия справа */
.content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.content-header h2 {
  margin: 0;
  font-size: var(--fs-24);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Тулбар действий: кнопки Notion (первичная/нейтральная/опасная) */
.content-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}

/* Кнопка действия тулбара и подвала таблицы — единый вид (как «История»).
   Вид задан без привязки к .content-actions, чтобы кнопка «Добавить» под таблицей
   выглядела так же, как кнопки тулбара. */
.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: var(--control-height-sm);
  padding: 0 var(--space-3);
  font-family: inherit;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--text);
  background-color: var(--bg);
  border: var(--line-1) solid var(--border-field);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard);
}

.action-button:hover:not(:disabled) {
  background-color: var(--bg-hover);
}

.action-button:disabled {
  color: var(--text-3);
  background-color: var(--bg-panel);
  cursor: not-allowed;
}

/* Скрытие кнопки действия атрибутом hidden (иначе display:inline-flex перебивает [hidden]).
   Селектор ниже специфичностью равен .content-actions .action-button — поэтому hidden
   реально скрывает кнопку и в тулбаре, и в подвале таблицы. */
.action-button[hidden],
.content-actions .action-button[hidden] {
  display: none;
}

.content-actions .action-button {
  /* Тулбар: кнопки стоят в ряд, вид наследуется от .action-button выше. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

/* Главное действие («+ Добавить строку») — акцентная кнопка, обводка */
.content-actions .action-button:first-child:not(:disabled) {
  color: var(--accent);
  background-color: transparent;
  border-color: var(--accent);
  box-shadow: none;
}

.content-actions .action-button:first-child:hover:not(:disabled) {
  color: var(--accent-hover);
  background-color: var(--accent-soft);
  border-color: var(--accent-hover);
}

/* «Удалить выбранные» — текст краснеет, заливка остаётся светлой */
.content-actions .action-button.danger {
  color: var(--danger);
  border-color: var(--border-field);
  background-color: var(--bg);
}

.content-actions .action-button.danger:hover:not(:disabled) {
  background-color: var(--danger-soft);
  border-color: var(--danger);
}

/* ── Панель «Управление столбцами»: карточка-поповер над таблицей ──── */
.column-controls {
  position: absolute;
  top: 72px;
  right: var(--space-6);
  z-index: var(--z-sticky);
  width: 280px;
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--space-3);
  background-color: var(--bg);
  border: var(--line-1) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.column-controls h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.columns-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.column-controls-actions {
  display: flex;
  gap: var(--space-2);
}

/* ── Списки баз и шаблонов в сайдбаре ─────────────────────────────── */
.database-item,
.view-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  background-color: transparent;
  border: var(--line-1) solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.database-item:hover,
.view-item:hover {
  background-color: var(--bg-hover);
}

/* Выбранный элемент: мягкая заливка акцента и рамка — как активный пункт Notion */
.database-item.selected,
.view-item.selected {
  background-color: var(--bg-selected);
  border-color: var(--accent);
}

/* Перетаскивание шаблонов (смена порядка, только admin) */
.view-item.dragging {
  opacity: 0.5;
}

.view-item.drop-target {
  border-color: var(--accent);
  border-style: dashed;
}

/* Шаблон в сайдбаре: иконка + название в одну строку.
   Иконка — из config.icon (набор public/js/icons.js). Цвет не задаётся: иконка наследует
   цвет названия (--text), поэтому в тёмной теме выглядит так же, как текст. */
.view-item {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.view-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: inherit;
}

/* ── Кнопка сворачивания сайдбара в шапке ───────────────────────────── */
.header-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--control-height-sm);
  height: var(--control-height-sm);
  padding: 0;
  color: var(--text-2);
  background-color: transparent;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.header-icon-button:hover {
  color: var(--text);
  background-color: var(--bg-hover);
}

.header-icon-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── Свёрнутый сайдбар: узкая полоска только с иконками ───────────────
   Класс .is-sidebar-collapsed ставит public/js/sidebar.js на #main-screen,
   состояние запоминается в localStorage (sidebar:collapsed). В полоске видны
   иконка поиска, «+ новый шаблон», иконки шаблонов и админ-панель; названия
   скрыты (остаются в title/aria-label), список баз тоже скрыт. */
@media (min-width: 761px) {
  .app-container.is-sidebar-collapsed .sidebar {
    flex: 0 0 var(--sidebar-width-collapsed);
    width: var(--sidebar-width-collapsed);
    gap: var(--space-2);
    padding: var(--space-3) var(--space-1);
    align-items: center;
  }

  .app-container.is-sidebar-collapsed .sidebar-title,
  .app-container.is-sidebar-collapsed .sidebar-label,
  .app-container.is-sidebar-collapsed .quick-search-label,
  .app-container.is-sidebar-collapsed .view-name,
  .app-container.is-sidebar-collapsed .loading-text,
  .app-container.is-sidebar-collapsed .empty-text,
  .app-container.is-sidebar-collapsed #databases-section {
    display: none;
  }

  /* Кнопки и пункты шаблонов — квадраты с иконкой по центру */
  .app-container.is-sidebar-collapsed .quick-search-button,
  .app-container.is-sidebar-collapsed .sidebar-button,
  .app-container.is-sidebar-collapsed .admin-button,
  .app-container.is-sidebar-collapsed .view-item {
    justify-content: center;
    width: var(--control-height);
    padding: 0;
  }

  .app-container.is-sidebar-collapsed .view-item {
    height: var(--control-height);
    border-color: transparent;
  }

  .app-container.is-sidebar-collapsed .view-item.selected {
    border-color: var(--accent);
  }
}

.database-name,
.view-name {
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.database-description {
  font-size: var(--fs-12);
  line-height: var(--lh-base);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Адаптив: сначала узкий сайдбар, затем колонка сверху ─────────── */
@media (max-width: 1100px) {
  .sidebar {
    flex-basis: 220px;
    width: 220px;
  }

  .main-content {
    padding: var(--space-3) var(--space-4) var(--space-4);
  }

  .column-controls {
    right: var(--space-4);
  }
}

@media (max-width: 760px) {
  .app-content {
    flex-direction: column;
    overflow-y: auto;
  }

  .sidebar {
    flex: 0 0 auto;
    width: 100%;
    max-height: 280px;
    border-right: 0;
    border-bottom: var(--line-1) solid var(--border);
  }

  .main-content {
    overflow-y: visible;
    padding: var(--space-3);
  }

  .content-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .content-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .content-actions .action-button {
    flex: 1 1 auto;
    min-width: 140px;
  }

  .column-controls {
    position: static;
    width: 100%;
    max-height: none;
    box-shadow: var(--shadow-none);
  }
}
/* ── Тёмная тема: сплошные панели без стекла ────────────────────── */
[data-theme="dark"] .sidebar {
  background: var(--bg-panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-theme="dark"] .content-header {
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: var(--line-1) solid var(--border);
}