/* Общие стили сайта. Без внешних CDN: фирменный шрифт лежит в /static/fonts.
   Фирменная шапка, обложка входа и печать — в brand.css. */

/* Noto Sans (SIL OFL 1.1, лицензия — fonts/OFL.txt): прямой — переменный по насыщенности 400–700,
   курсив — 400. Кириллица и латиница отдельными файлами: браузер качает только нужный. */
@font-face {
  font-family: "Noto Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/noto-sans-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Noto Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/noto-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/noto-sans-italic-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Noto Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/noto-sans-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Палитра по брендбуку «Инпром Эстейт». Контраст текста (WCAG): --accent на белом 5,3:1, на --bg 4,8:1,
   на --accent-soft 4,6:1; --muted на белом 5,1:1, на --bg 4,7:1; --ok на белом 5,3:1, на --ok-soft 4,7:1. */
:root {
  --brand: #006ebe;          /* Pantone 300C — основной: шапка, обложка */
  --brand-2: #0082c8;        /* Pantone 3005 — дополнительный: полосы, обводки (белый текст на нём 4,2:1 — не для текста) */
  --brand-green: #78b446;    /* Pantone 375C — фоны и полосы, не для текста (2,5:1) */
  --bg: #f2f5f9;             /* фон страницы: светлый, чуть холодный */
  --surface: #ffffff;        /* карточки, таблицы, меню */
  --surface-2: #f1f3f6;      /* заголовки таблиц — светло-серый от Black 10% */
  --text: #1e2329;
  --muted: #6e6e6e;          /* Black 50% */
  --line: #dde2e8;           /* от Black 10%, чуть холоднее */
  --accent: #006ebe;         /* ссылки, основные кнопки, активное */
  --accent-hover: #005a9e;   /* наведение на основную кнопку: темнее, белый текст 7,1:1 */
  --accent-soft: #e6f0f8;    /* светло-голубой: выделение, наведение на вторичную кнопку */
  --danger: #b42318;
  --danger-soft: #fdecea;
  --warning: #9a6700;
  --warning-soft: #fff4d6;
  --ok: #3c7a20;             /* зелёный 375C, затемнённый для текста */
  --ok-soft: #ecf4e5;
  --radius: 8px;
  --sidebar: 240px;
  --font: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--font);
  /* Длинная ссылка или код переносится, только если не влезает в строку. `anywhere` здесь нельзя:
     он разрешает таблицам сжимать колонки до одной буквы («Отк/рыт/ь»). */
  overflow-wrap: break-word;
}

a { color: var(--accent); }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 .5rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .75rem; }
p { margin: 0 0 .75rem; }
img, video, svg { max-width: 100%; height: auto; }
.muted { color: var(--muted); }

/* ---------- Верхняя полоса ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 52px;
  padding: .5rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; font-weight: 700; color: var(--text); text-decoration: none; }
.brand-mark { flex: none; width: 24px; height: 24px; }
.brand-name { white-space: nowrap; }
.demo-flag { flex: none; white-space: nowrap; }
.demo-flag-short { display: none; }
.who { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; min-width: 0; }
.who-name { font-weight: 600; }
.who-role { font-size: .85rem; color: var(--muted); }
.sidebar-who { display: none; }
.logout { margin: 0; }
.link-button {
  background: none; border: 0; padding: .25rem 0; color: var(--accent);
  font: inherit; cursor: pointer; text-decoration: underline;
}

/* Меню и бургер — в nav.css. */
.layout { display: flex; align-items: flex-start; min-height: calc(100vh - 52px); }

.content { flex: 1; min-width: 0; padding: 1.5rem; align-self: stretch; display: flex; flex-direction: column; }
.content-narrow { max-width: 760px; margin: 0 auto; }
.page-body { flex: 1 0 auto; min-width: 0; }

/* Подвал: тонкая строка внизу страницы. */
.site-footer { margin-top: 2rem; padding-top: .6rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }

/* ---------- Блоки ---------- */

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; }
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; line-height: 1.5; white-space: nowrap; vertical-align: baseline; background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.badge-ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge-warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.badge-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge-demo { background: var(--warning-soft); color: var(--warning); border-color: transparent; font-weight: 600; }

.alert { padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; border: 1px solid transparent; }
.alert-error { background: var(--danger-soft); color: var(--danger); border-color: #f5c2bd; }
.alert-ok { background: var(--ok-soft); color: var(--ok); }
.alert-warning { background: var(--warning-soft); color: var(--warning); }

.back { margin-bottom: 1rem; }
.back a { text-decoration: none; }

/* ---------- Формы и кнопки ---------- */

.form { display: grid; gap: .9rem; max-width: 420px; }
.field { display: grid; gap: .3rem; }
.field-label { font-weight: 600; font-size: .9rem; }
.field-hint { font-size: .85rem; color: var(--muted); }
input, select, textarea {
  width: 100%;
  max-width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
input[type="checkbox"], input[type="radio"] { width: auto; }

.button {
  display: inline-block;
  padding: .6rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
/* Вторичная — белая с синей рамкой; основная — синяя; опасная — красная. */
.button:hover { background: var(--accent-soft); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.button.danger:hover { background: #8f1c13; border-color: #8f1c13; }
.button.danger:focus-visible { outline-color: var(--danger); }
.button:disabled, .button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.button.primary:disabled:hover { background: var(--accent); border-color: var(--accent); }
.button:not(.primary, .danger):disabled:hover { background: var(--surface); }

/* ---------- Вход: ТРЦ и категории ---------- */

.object-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; margin-top: 1rem; }
.object-card {
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1rem; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); color: var(--text); text-decoration: none;
}
/* Подключённый ТРЦ — заметная карточка с акцентной рамкой; остальные приглушены. */
a.object-card { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 4px 14px rgba(0, 110, 190, .14); }
a.object-card:hover, a.object-card:focus-visible { background: var(--accent-soft); outline: none; }
a.object-card:focus-visible { box-shadow: 0 0 0 3px var(--accent); }
a.object-card .object-name { color: var(--accent); }
.object-go { margin-top: auto; padding-top: .5rem; font-weight: 600; color: var(--accent); }
.object-card.is-disabled { background: rgba(255, 255, 255, .55); border-style: dashed; color: var(--muted); cursor: not-allowed; }
.object-card.is-disabled .object-name { font-weight: 600; }
.object-card.is-disabled .badge { background: transparent; }
.object-name { font-weight: 700; font-size: 1.05rem; }
.object-city { color: var(--muted); }
.object-card .badge { align-self: flex-start; margin-top: auto; }

.choice-list { display: grid; gap: .6rem; max-width: 420px; }
.choice {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .9rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font-weight: 600; text-decoration: none;
}
.choice::after { content: "→"; content: "→" / ""; color: var(--accent); }  /* стрелка — украшение, читалкам не нужна */
.choice:hover, .choice:focus-visible { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 1px var(--accent); outline: none; }
.admin-link { margin-top: 1.5rem; font-size: .9rem; }
.admin-link a { color: var(--muted); }

/* ---------- Таблицы ---------- */

/* Широкая таблица не растягивает страницу: прокручивается вбок внутри своей обёртки. */
.table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; background: var(--surface); }
/* В ячейках слова не рвутся посреди слова: колонка не уже самого длинного слова,
   а если всё вместе не влезает — таблица прокручивается в .table-wrap. */
th, td {
  padding: .55rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top;
  overflow-wrap: normal; word-break: normal; hyphens: manual;
}
th { font-size: .85rem; color: var(--muted); font-weight: 600; background: var(--surface-2); }
td.num, td time { white-space: nowrap; }
/* Заголовок колонки чисел может переноситься по словам («С первого / раза»): число под ним не рвётся. */
table th.num { white-space: normal; }
td .button { padding: .4rem .8rem; }
@media (min-width: 801px) {
  /* Колонка с названием работы — самая важная: не даём ей сжаться в столбик по слову. */
  td:has(.work-title) { min-width: 10rem; }
}

/* ---------- Плашка «второй этап» ---------- */

.ai-placeholder {
  padding: .9rem 1rem; margin-bottom: 1rem;
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: repeating-linear-gradient(135deg, var(--surface) 0 10px, var(--bg) 10px 20px);
  color: var(--muted);
}
.ai-placeholder-title { font-weight: 600; color: var(--text); }

/* ---------- Ноутбук: меню чуть уже, чтобы широким таблицам хватало места ---------- */

@media (max-width: 1366px) {
  :root { --sidebar: 228px; }
}

/* ---------- Телефон ---------- */

@media (max-width: 800px) {
  .content { padding: 1rem; }
  .topbar { gap: .6rem; padding: .5rem .75rem; }
  .topbar .who { display: none; }
  .logout { margin-left: auto; }
  .sidebar-who { display: flex; flex-direction: column; padding: 0 .5rem .75rem; margin-bottom: .75rem; border-bottom: 1px solid var(--line); }

  /* Таблица → карточки: у ячейки нужен data-label с названием колонки.
     Подпись — мелкой серой строкой над значением, значение слева во всю ширину карточки. */
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
  .table-cards { background: transparent; }
  .table-cards tr { margin-bottom: .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .table-cards td {
    padding: .5rem .75rem; border-bottom: 1px solid var(--line);
    text-align: left; white-space: normal; overflow-wrap: break-word; min-width: 0;
  }
  .table-cards td:last-child { border-bottom: 0; }
  /* Скругления у крайних ячеек: цветной фон строки (просрочено) не выпирает за углы карточки. */
  .table-cards td:first-child { border-top-left-radius: calc(var(--radius) - 1px); border-top-right-radius: calc(var(--radius) - 1px); }
  .table-cards td:last-child { border-bottom-left-radius: calc(var(--radius) - 1px); border-bottom-right-radius: calc(var(--radius) - 1px); }
  .table-cards td:empty { display: none; }
  .table-cards td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: .15rem;
    color: var(--muted); font-size: .8rem; font-weight: 400; line-height: 1.3; text-align: left;
  }
  .table-cards td .badge { display: inline-block; margin: .1rem 0; }

  /* Полоса периода (работы, план, обходы): стрелки по краям, название между ними переносится внутри. */
  .period-bar .period-nav { flex: 1 1 100%; flex-wrap: nowrap; }
  .period-bar .period-nav .button { flex: none; padding: .45rem .85rem; }
  .period-bar .period-nav .period-title { flex: 1 1 auto; min-width: 0; text-align: center; }
  .period-bar .period-nav > a:not(.button) { flex: none; }
}

@media (max-width: 480px) {
  /* Название в шапке: если не влезает в строку — две ровные строки, а не обрыв. */
  .brand { font-size: .9rem; line-height: 1.15; }
  .topbar:not(.topbar-plain) .brand-mark { display: none; }  /* рядом «Меню» и «Выйти»: место — названию */
  .brand-name { white-space: normal; text-wrap: balance; }
  .demo-flag-long { display: none; }
  .demo-flag-short { display: inline; }
}

@media (max-width: 400px) {
  h1 { font-size: 1.3rem; }
}
.recovery-codes { columns: 2; column-gap: 2rem; padding-left: 1.5rem; font-size: 1.05rem; line-height: 1.9; }
@media (max-width: 480px) { .recovery-codes { columns: 1; } }