:root {
  --color-free: #dff5e1;
  --color-booked: #fff3cd;
  --color-contract: #e2e3ff;
  --color-sold: #e9ecef;
  --color-border: #d7dbe0;
  --color-text: #1c2226;
  --color-muted: #5a6570;
  --color-accent: #2c6e49;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--color-text);
  line-height: 1.5;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px;
}

.site-header {
  border-bottom: 1px solid var(--color-border);
  padding: 12px 0;
}

.brand {
  font-weight: 700;
  text-decoration: none;
  color: var(--color-text);
}

main.container { padding-top: 24px; padding-bottom: 40px; }

h1 { font-size: 1.6rem; margin: 0 0 8px; }
h2 { font-size: 1.2rem; margin: 24px 0 8px; }

.lead { color: var(--color-muted); }

a { color: var(--color-accent); }

.btn {
  display: inline-block;
  padding: 8px 16px;
  background: var(--color-accent);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
  padding: 12px;
  background: #f5f7f8;
  border-radius: 8px;
}
.filters label { display: flex; flex-direction: column; font-size: 0.85rem; gap: 4px; }
.filters input { padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 4px; width: 110px; }
.filters button { align-self: flex-end; padding: 8px 16px; border: none; border-radius: 4px; background: var(--color-accent); color: #fff; cursor: pointer; }

table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.flats-list th, .flats-list td, .flat-card th, .flat-card td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
.flat-card th { width: 140px; color: var(--color-muted); font-weight: 500; }
.price { font-weight: 700; }

.status { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.85rem; }
.status-free { background: var(--color-free); }
.status-booked { background: var(--color-booked); }
.status-contract { background: var(--color-contract); }
.status-sold { background: var(--color-sold); }

.legend { list-style: none; display: flex; gap: 16px; padding: 0; margin: 8px 0 16px; flex-wrap: wrap; }
.legend li { display: flex; align-items: center; gap: 6px; }

/* Плашки легенды шахматки: у пустого <span class="status"> нет содержимого,
   поэтому без явных размеров он схлопывается в ноль и легенда выглядит
   строкой из одних подписей. */
.legend .status { width: 20px; height: 20px; padding: 0; border: 1px solid var(--color-border); }

.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; gap: 16px; align-items: center; justify-content: center;
  flex-wrap: wrap; padding: 12px 16px;
  background: #fff; border-top: 1px solid var(--color-border);
}
.cookie-banner p { margin: 0; font-size: 0.9rem; }
.cookie-banner button {
  padding: 8px 16px; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--color-accent); color: #fff;
}

.chess-wrap { overflow-x: auto; margin-bottom: 24px; }
table.chess { border-collapse: collapse; }
table.chess td {
  border: 1px solid var(--color-border);
  min-width: 72px;
  height: 56px;
  text-align: center;
  font-size: 0.8rem;
  vertical-align: middle;
}
table.chess td.empty { border: none; background: transparent; }
table.chess td[data-status="free"] { background: var(--color-free); }
table.chess td[data-status="booked"] { background: var(--color-booked); }
table.chess td[data-status="contract"] { background: var(--color-contract); }
table.chess td[data-status="sold"] { background: var(--color-sold); }
table.chess td a { display: block; color: inherit; text-decoration: none; padding: 4px; }
table.chess td.hover-row, table.chess td.hover-col { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.floors-list, .buildings-list { padding-left: 20px; }

img.plan { max-width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: 6px; }

.site-footer {
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.85rem;
  padding: 16px 0;
  margin-top: 40px;
}

@media (max-width: 480px) {
  h1 { font-size: 1.3rem; }
  .filters input { width: 100%; }
  .filters label { width: 100%; }
}

body.embed { padding: 0; }
body.embed main.container { padding-top: 8px; max-width: none; }

/* Дашборд аналитики руководителя (/cabinet/analytics). Стили живут здесь;
   в app/analytics/theme.py остались только палитра статусов и расчёт ширины
   полоски. Графических библиотек нет намеренно: доли рисуются шириной блока
   в процентах. */
.tiles { display: flex; flex-wrap: wrap; gap: 16px; margin: 16px 0; }
.tile { flex: 1 1 200px; padding: 16px; border: 1px solid var(--color-border); border-radius: 8px; }
.tile .value { font-size: 1.8rem; font-weight: 700; }
.tile .caption { color: var(--color-muted); font-size: 0.9rem; }
.bar-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.bar-row .name { flex: 0 0 220px; }
.bar-track { flex: 1; height: 14px; background: #f0f0f0; border-radius: 7px; }
.bar { height: 14px; border-radius: 7px; background: var(--color-accent); }
.traffic { padding: 12px 16px; border-radius: 8px; margin: 16px 0; }
.heat { border-collapse: collapse; }
.heat td { width: 34px; height: 26px; text-align: center; font-size: 0.75rem;
           border: 1px solid var(--color-border); }

/* Текст только для скринридера: смысл, который на экране передаёт цвет
   (заливка ячейки тепловой карты), словами. display:none не годится —
   скринридер такой текст не читает. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Плашка о подписке в кабинете (app/web/cabinet.py:_billing_banner).
   Цвет — не единственный носитель смысла: текст плашки говорит то же самое
   словами, а рамка слева видна и в монохроме. */
.banner {
  margin: 0 0 16px; padding: 12px 16px; border-radius: 8px;
  border: 1px solid var(--color-border); border-left-width: 4px;
}
.banner.warn { background: var(--color-booked); border-left-color: #b8860b; }
.banner.error { background: #fde2e1; border-left-color: #a4241e; }