/* Domus: стили сайдбара на Tabler
   Меняйте значения переменных ниже под свои предпочтения.
   Все комментарии — на русском, чтобы было удобно сопровождать.
*/

/* === Настраиваемые переменные === */
:root {
	/* Основной шрифт только для САЙДБАРА (можно любой web-safe или подключённый Google Font) */
	--domus-sidebar-font-family: "Inter", "Segoe UI", Roboto, Arial, Helvetica, sans-serif;

	/* Базовый размер шрифта в сайдбаре */
	--domus-sidebar-font-size: 0.95rem;  /* 0.95–1.05rem — комфортно */

	/* Жирность подписи пункта меню */
	--domus-sidebar-font-weight: 500;

	/* Размер иконок (webfont Tabler Icons) рядом с пунктами меню */
	--domus-sidebar-icon-size: 1.1rem;
	--domus-sb-hover-bg-light: rgba(0, 0, 0, .04);
	--domus-sb-active-bg-light: rgba(0, 0, 0, .08);
	--domus-sb-hover-bg-dark: rgba(255, 255, 255, .06);
	--domus-sb-active-bg-dark: #18212f;
	--domus-sb-radius: 1px;
	--domus-sb-x-gap: .1rem; /* «воздух» слева/справа от плашек */
}

/* === Применение к вертикальному меню Tabler === */
.navbar-vertical {
  /* Если хотите влиять ВЕСЬ текст в сайдбаре — раскомментируйте следующую строку */
  font-size: var(--domus-sidebar-font-size); 
  font-family: var(--domus-sidebar-font-family);
}

/* Подпись пунктов меню (только текст, без иконки) */
.navbar-vertical .nav-link-title {
  font-size: var(--domus-sidebar-font-size);
  font-weight: var(--domus-sidebar-font-weight);
}

/* Иконка слева от подписи */
.navbar-vertical .nav-link-icon .ti {
  font-size: var(--domus-sidebar-icon-size);
  line-height: 1; /* компактнее вертикально */
}

/* Немного плотнее делаем кликабельную область пункта меню (по желанию) */
/* Закомментируйте, если не нужно */
.navbar-vertical .nav-link {
  padding-top: .7rem;
  padding-bottom: .7rem;
}

/* Базовая форма ссылки меню: делаем её «плашкой» */
.navbar-vertical .navbar-nav .nav-link {
  border-radius: var(--domus-sb-radius);
  margin-inline: var(--domus-sb-x-gap);
  padding-inline: .75rem;               /* чуть шире кликабельная зона */
  transition: background-color .15s ease, color .15s ease;
}

/* Светлая тема сайдбара (по умолчанию) */
.navbar-vertical .navbar-nav .nav-link:hover {
  background: var(--domus-sb-hover-bg-light);
}
.navbar-vertical .navbar-nav .nav-link.active {
  background: var(--domus-sb-active-bg-light);
}

/* Тёмная тема сайдбара (когда на <aside> стоит navbar-dark или data-bs-theme="dark") */
.navbar-vertical.navbar-dark .navbar-nav .nav-link:hover,
.navbar-vertical[data-bs-theme="dark"] .navbar-nav .nav-link:hover {
  background: var(--domus-sb-hover-bg-dark);
}
.navbar-vertical.navbar-dark .navbar-nav .nav-link.active,
.navbar-vertical[data-bs-theme="dark"] .navbar-nav .nav-link.active {
  background: var(--domus-sb-active-bg-dark);
  color: var(--tblr-white);              /* чтобы текст был читабельным */
}

/* На активном пункте иконка и подпись наследуют цвет */
.navbar-vertical .nav-link.active .nav-link-title,
.navbar-vertical .nav-link.active .nav-link-icon,
.navbar-vertical .nav-link.active .nav-link-icon .ti {
  color: inherit;
}

/* =========================================================
   Domus — Визуализация: квартиры/паркинг/кладовые
   ========================================================= */
:root {
  --domus-cell: 28px;            /* базовый размер клетки */
  --domus-cell-gap: 4px;         /* зазор между клетками/строками */
  --domus-floor-col-w: 56px;     /* ширина колонки этажей */
  --domus-row-h: 28px;           /* высота строки этажа */
  --domus-header-h: calc(var(--domus-row-h) + var(--domus-cell-gap)); /* ЕДИНАЯ высота заголовка */
}


/* Адаптация размеров на маленьких/больших экранах */
@media (max-width: 1200px){
  :root { --domus-cell: 26px; --domus-row-h: 26px; }
}
@media (max-width: 768px){
  :root { --domus-cell: 24px; --domus-row-h: 24px; }
}
@media (min-width: 1600px){
  :root { --domus-cell: 32px; --domus-row-h: 32px; }
}

/* Обёртка: липкие колонки этажей + горизонтальный скролл */
.domus-board,
.domus-floor-sticky--header {
  display: grid;
  grid-template-columns: var(--domus-floor-col-w) 1fr var(--domus-floor-col-w);
  column-gap: 8px;            /* ✨ «Воздух» между левой/правой колонками этажей и скролл-лентой */
  align-items: stretch;
}

/* Колонки этажей (слева/справа) */
.floors-col {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--tblr-border-color);
}
.floors-col-right { border-right: 0; border-left: 1px solid var(--tblr-border-color); }

.floors-col-header {
  height: var(--domus-header-h);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .85rem;
  background: var(--tblr-bg-surface);
  position: sticky; top: 0; z-index: 1;
  margin-bottom: 8px;  /* тот же «зазор», что и у строк этажей */
  margin-top: 8px;
}

.floors-col-body .floor-index {
  width: 100%; height: var(--domus-row-h);
  display: flex; align-items: center; justify-content: center;
  color: var(--tblr-secondary); font-weight: 600;
  margin-bottom: var(--domus-cell-gap); /* тот же вертикальный зазор, что и между .floor-row */
}

/* Скролл-область с подъездами */
.board-scroll {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 8px;           /* ✨ Внутренние отступы слева/справа для симметрии */
  background: var(--tblr-bg-surface);
  box-sizing: border-box;
}

/* Контейнер подъездов */
.entrances {
  display: flex;
  flex-wrap: nowrap;          /* не переносить подъезды */
  gap: 8px;                   /* расстояние между подъездами */
  padding: 0px 0;             /* ⬆️ только вертикальные отступы, горизонталь теперь у .board-scroll */
  min-height: calc((var(--domus-row-h) * 12) + 16px);
}

/* Подписи подъезда: сверху и снизу */
.entrance-header,
.entrance-footer {
  text-align: center;
  font-weight: 600;
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: .5rem;
  padding: 0 8px;                 /* горизонтальные отступы, БЕЗ вертикальных, чтобы высота была ровной */
  box-sizing: border-box;
}

/* Верхняя — липкая к верху и по высоте 1в1 как «Этаж» */
.entrance-header {
  position: sticky; top: 0; z-index: 1;
  height: var(--domus-header-h);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}

/* Нижняя — симметричная, липкая к низу */
.entrance-footer {
  position: sticky; bottom: 0; z-index: 1;
  height: var(--domus-header-h);
  display: flex; align-items: center; justify-content: center;
  margin-top: var(--domus-cell-gap);
}


.entrance-col {
  display: flex; flex-direction: column; align-items: stretch;
  flex: 0 0 auto; /* не сжимать колонку */
  /* ширина = кол-во колонок * размер клетки + зазоры между ними */
  width: calc(
    (var(--cols, 1) * var(--domus-cell)) +
    ((var(--cols, 1) - 1) * var(--domus-cell-gap))
  );
}

/* Ряд этажа — одинаковой высоты для всех подъездов */
.floor-row {
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), var(--domus-cell));
  gap: var(--domus-cell-gap);
  height: var(--domus-row-h);
  align-items: center;
  margin-bottom: var(--domus-cell-gap);
}


/* Ячейки */
.cell {
  width: var(--domus-cell);
  height: var(--domus-row-h);
  border: 1px solid var(--tblr-border-color);
  border-radius: .25rem;
  background: #f1f1f1;
  font-size: .75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  user-select: none; cursor: pointer;
}
.cell-empty { background: #f1f1f1; border-style: dashed; }
.cell-nonres { background: #bebebe; color: #666; cursor: not-allowed; }
.cell.occupied { background: #FFC107; color: #000; }

/* Паркинг / Кладовые карточки */
.parking-level, .storage-level {
  border: 1px dashed var(--tblr-border-color);
  border-radius: .5rem;
  padding: 12px; margin-bottom: 12px;
}
.parking-title, .storage-title { text-align: center; font-weight: 600; margin-bottom: 8px; }

.parking-grid, .storage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--domus-cell));
  gap: var(--domus-cell-gap);
  justify-content: center;
}
.parking-spot, .storage-unit { /* наследуют .cell через JS-рендер? защитное дублирование: */
  width: var(--domus-cell); height: var(--domus-row-h);
  border: 1px solid var(--tblr-border-color);
  border-radius: .25rem; background: #fafafa;
  font-size: .75rem; font-weight: 700; display:flex; align-items:center; justify-content:center;
  cursor: pointer;
}
.parking-spot.occupied, .storage-unit.occupied { background: #FFC107; }

/* Мелкие улучшения */
#houseMeta { margin-top: .25rem; }

/* Бейдж "Арендатор" рядом с именем жильца (админ-шахматка) */
.domus-resident-name + .badge {
  vertical-align: middle;
  margin-top: -1px; /* чуть выравниваем по высоте строки */
}

/* Публичная шахматка */
body.public-board header svg { max-width: 60vw; height: auto; }
body.public-board .page-title { font-weight: 600; }

/* === Таблица пользователей === */
#users-table thead.sticky-top th {
  background: var(--tblr-body-bg);
  z-index: 1;
}
.skeleton-avatar {
  display: inline-block; width: 32px; height: 32px; border-radius: 50%;
  background: var(--tblr-border-color);
  opacity: .3;
}
.skeleton-line {
  display: block; height: 12px; background: var(--tblr-border-color);
  border-radius: 4px; opacity: .5;
}

/* === Domus Public Board — компактные метрики в шапке === */
.board-stats{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem .5rem;
  justify-content:flex-end;
}
@media (max-width: 767.98px){
  .board-stats{ justify-content:center; }
}
.board-stat{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .6rem;
  border-radius:999px;
  background:#F9FAFB;                 /* Neutral Light */
  border:1px solid #E0E0E0;            /* Neutral Med */
  font-weight:600;
  line-height:1;
}
.board-stat i{ font-size:18px; line-height:1; }

/* Цвета иконок в стиле Domus */
.board-stat--res i{ color:#440099; }   /* Primary */
.board-stat--apt i{ color:#3B4D61; }   /* Secondary */
.board-stat--park i{ color:#00A3E0; }  /* Tabler green */
.board-stat--stor i{ color:#FFC107; }  /* Highlight */

/* Центрируем заголовок дома на мобильном: учитываем, что .page-title может быть flex */
@media (max-width: 767.98px){
  #houseName{
    display: flex !important;
    align-items: center;
    justify-content: center;      /* центрируем содержимое (текст + иконка "i") */
    text-align: center !important;/* на случай, если будет обычный block */
    width: 100%;
    margin-inline: auto;          /* страховка на случай inline/block-вариантов */
  }
}

/* Кликабельные чипы в шапке board */
.board-stat { cursor: pointer; user-select: none; transition: background .15s, border-color .15s; }
.board-stat:hover { background: #fff; border-color: #cfd4da; }
.board-stat:focus-visible { outline: 2px solid #00A3E0; outline-offset: 2px; }