/* ============================================================
   ДИЗАЙН-ТОКЕНЫ бюро «Система защиты»
   Палитра, типографика и геометрия — из фирменного пакета.
   ============================================================ */
:root {
  --dark:     #2A170E;   /* тёмный фон и шапка */
  --darker:   #241309;   /* экран входа */
  --brown:    #43281A;   /* основные кнопки, активная пилюля */
  --brown-2:  #35200F;   /* наведение */
  --gold:     #C9992F;   /* линии орнамента, рамки, акценты */
  --gold-2:   #E6C877;   /* вспомогательное золото */
  --gold-lt:  #F0DBA4;   /* световой слой */
  --sand:     #8A5A24;   /* подписи, активный подтаб */
  --cream:    #F7F0E2;   /* фон страниц */
  --paper:    #FFFDF8;   /* карточки */
  --ink:      #5C3A24;   /* текст на светлом */
  --muted:    rgba(67,40,26,.6);
  --line:     rgba(67,40,26,.14);
  --line-2:   rgba(67,40,26,.2);
  --ok:       #2E7D32;
  --err:      #B3261E;

  --shadow:   0 2px 10px rgba(67,40,26,.06);
  --shadow-2: 0 6px 24px rgba(67,40,26,.1);
  --shadow-3: 0 10px 28px rgba(67,40,26,.12);
  --radius:   12px;      /* крупные карточки */
  --radius-2: 10px;      /* карточки списка */

  /* Утверждённая пара (вариант 14a) */
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif; /* заголовки */
  --ui:    'Commissioner', 'Helvetica Neue', Arial, sans-serif;   /* интерфейс */

  --orn-light: url('assets/ornament-light.svg');  /* решётка в полную силу */
  --orn-soft:  url('assets/ornament-soft.svg');   /* вполсилы — светлая часть */
  --orn-dark:  url('assets/ornament-dark.svg');   /* тёмные плашки */
  --orn-lit:   url('assets/ornament-lit.svg');    /* световой слой (блик) */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ui);
  font-size: 14px;
  color: var(--ink);
  background: var(--cream);
  -webkit-text-size-adjust: 100%;
  min-height: 100dvh;
}
.hidden { display: none !important; }

/* ---------- Загрузка ---------- */
.boot {
  position: fixed; inset: 0; display: grid; place-content: center; justify-items: center;
  gap: 18px; background: var(--cream); z-index: 50;
}
.boot img { border-radius: 22px; box-shadow: var(--shadow); }
.boot__spin {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--gold);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Кнопки / поля ---------- */
.btn {
  appearance: none; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink);
  padding: 14px 18px; border-radius: 9px;
  cursor: pointer; transition: transform .05s ease, background .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brown); color: var(--cream); border-color: var(--brown); }
.btn--primary:hover { background: var(--brown-2); }
.btn--gold { background: var(--paper); color: var(--sand); border-color: var(--gold); }
.btn--gold:hover { background: rgba(201,153,47,.08); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn--ghost:hover { color: var(--ink); }
.btn--sm { padding: 8px 12px; }

.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; gap: 12px; }
.row .field { flex: 1; }
.field { display: flex; flex-direction: column; gap: 6px; }
/* Поля в одной строке: инпуты прижаты к низу, поэтому «Номер» и «Дата»
   стоят на одной горизонтали, даже если подпись одного поля в две строки */
.row .field > input, .row .field > select, .row .field > textarea { margin-top: auto; }

input, textarea, select {
  font-family: var(--ui); font-size: 14px; color: var(--brown); background: #FFF;
  border: 1px solid var(--line-2); border-radius: 8px; padding: 12px 14px; width: 100%;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,153,47,.15);
}
textarea { resize: vertical; }

.msg { min-height: 20px; margin: 2px 0 0; }
.msg.ok  { color: var(--ok); }
.msg.err { color: var(--err); }

/* ---------- Экран входа ---------- */
.login {
  min-height: 100dvh; display: grid; place-items: center; padding: 24px;
  position: relative;
  background-color: var(--darker);
  background-image: linear-gradient(180deg,
    rgba(36,19,9,.94), rgba(36,19,9,.18) 40%, rgba(36,19,9,.92));
}
.login::before {                     /* базовая решётка, притушена */
  content: ''; position: fixed; inset: 0; pointer-events: none;
  background-image: var(--orn-dark); background-size: 60px 90px; opacity: .5;
}
.login::after {                      /* световой слой — блик пошире и медленнее */
  content: ''; position: fixed; inset: 0; pointer-events: none;
  background-image: var(--orn-lit); background-size: 60px 90px;
  -webkit-mask-image: radial-gradient(circle,
    #fff 0%, rgba(255,255,255,.55) 45%, transparent 72%);
  mask-image: radial-gradient(circle,
    #fff 0%, rgba(255,255,255,.55) 45%, transparent 72%);
  -webkit-mask-size: 820px 820px; mask-size: 820px 820px;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: ornSweepLogin 22s ease-in-out infinite;
}
.login__card {
  position: relative; z-index: 1;
  width: 100%; max-width: 376px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-3); padding: 28px; text-align: center;
}
.login__logo { border-radius: 0; }
.login__firm { margin: 14px 0 4px; color: var(--brown); }
.login__hint {
  margin: 0 0 22px;
}
.login__sent { text-align: left; }
.login form { text-align: left; }

/* ---------- Верхняя панель ---------- */
.app { padding-bottom: 40px; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background: var(--brown); color: #fff;
}
.topbar__logo { border-radius: 0; background: transparent; }
.topbar__titles { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.topbar__titles strong { color: var(--cream); }
.topbar__titles small {
  color: rgba(247,240,226,.6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar .btn--ghost {
  color: var(--gold);
}
.topbar .btn--ghost:hover { color: var(--gold-2); }
/* Правые кнопки — одной группой, чтобы их можно было переносить целиком */
.topbar__acts { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.firm-short   { display: none; }  /* короткое название — только на телефоне */
.topbar__over { display: none; }  /* надзаголовок — только на телефоне */

/* --- Шапка на узком экране: логотип слева, текст в три строки -------
   1) кнопки «Админ» и «Выйти» — верхним краем в одну линию с логотипом
   2) «АДВОКАТСКОЕ БЮРО» мелким — во всю ширину колонки, без обрезки
   3) «Система защиты» крупно
   4) роль с именем — отдельной строкой от левого края
   Логотип занимает всю высоту текстового блока, поэтому его удалось
   увеличить вдвое. */
@media (max-width: 620px) {
  .topbar {
    display: grid;
    grid-template-columns: auto 1fr;
    /* Надзаголовок и название — один блок «name», поэтому «Адвокатское
       бюро» прижато к «Системе защиты» вплотную. Кнопки в своей верхней
       строке, иначе они забирают ширину и название переносится. */
    grid-template-areas:
      ".    acts"
      "logo name"
      "user user";
    align-items: center;
    /* зазор до названия минимальный: у файла logo-tight.svg пустых
       полей нет, поэтому знак прижимается к тексту вплотную */
    column-gap: 4px; row-gap: 2px;
    padding: calc(env(safe-area-inset-top) + 8px) 10px 10px 8px;
  }
  .topbar__logo {
    grid-area: logo; width: 66px; height: 64px;
    align-self: center;                     /* на одной строке с названием */
  }

  /* .topbar__titles растворяется, чтобы его строки стали ярусами сетки */
  .topbar__titles { display: contents; }

  /* Кнопки — компактнее и плотнее к правому краю */
  .topbar__acts { grid-area: acts; justify-self: end; align-self: start; gap: 4px; }
  .topbar__acts .admintgl {
    padding: 4px 9px; font-size: 10px; letter-spacing: .06em; gap: 5px;
  }
  .topbar__acts .admintgl__dot { width: 7px; height: 7px; }
  .topbar__acts #logoutBtn { padding: 4px 0 4px 6px; }

  /* Блок названия: надзаголовок вплотную над названием */
  .topbar__name {
    grid-area: name; align-self: center;
    display: flex; flex-direction: column; gap: 0;
  }
  .topbar__over {
    display: block;
    font: 600 10px/1 var(--ui); letter-spacing: .2em;
    text-transform: uppercase; color: var(--gold);
    white-space: nowrap; margin-bottom: 1px;
  }
  /* по ID — иначе кегль перебивает общий типографический стандарт */
  #firmNameTop {
    display: block;
    font: 500 25px/1.02 var(--serif); color: var(--cream);
  }
  .topbar__titles small {
    grid-area: user; align-self: center; margin-top: 6px;
    white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35;
  }

  .firm-full  { display: none; }
  .firm-short { display: inline; }
}

/* ---------- Вкладки ---------- */
.tabs {
  display: flex; gap: 8px; overflow-x: auto; padding: 12px 28px;
  background: var(--paper); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-2); background: var(--paper);
  color: var(--ink); padding: 8px 15px 8px 11px; border-radius: 999px;
  font-family: var(--ui); font-size: 12.5px; font-weight: 500;
  cursor: pointer; white-space: nowrap; min-height: 44px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tab:hover { border-color: rgba(67,40,26,.28); }
.tab.is-active {
  background: var(--brown); color: var(--cream);
  border-color: var(--brown); font-weight: 600;
}

/* ---------- Контент ---------- */
.content { padding: 16px; max-width: 900px; margin: 0 auto; }
.panel { display: none; }
.panel.is-active { display: block; animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }

.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.panel__head h2 { margin: 0; }
.panel__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.search { width: 150px; padding: 8px 12px; }

/* ---------- Таблицы ---------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
/* Таблица записей реестра: на широком экране выходит за пределы колонки,
   чтобы влезали все столбцы (колонка контента остаётся 900 px) */
@media (min-width: 981px) {
  #registryHost .tablewrap, #registryHost .morebar {
    --tw: min(1360px, calc(100vw - 40px));
    width: var(--tw);
    margin-left: calc((100% - var(--tw)) / 2);
  }
}
/* Плашка под таблицей: «Показаны первые 15 из N» */
.morebar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; color: var(--muted); font: 400 13px/1.5 var(--ui);
}
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { position: sticky; top: 0; cursor: pointer; white-space: nowrap; }
th:hover { color: var(--gold); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) { background: #FCFAF6; }
td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
td.content { max-width: 340px; }
.empty { text-align: center; color: var(--muted); padding: 28px 12px; }
.count { color: var(--muted); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 20px);
  transform: translateX(-50%) translateY(20px);
  background: var(--brown); color: #fff; padding: 12px 18px; border-radius: 12px;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease; z-index: 60; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--err); }

/* ---------- Подвкладки (реестры / платежи) ---------- */
/* Подвкладки — всегда одной строкой. Названия короткие, отступы
   умеренные, чтобы все «таблетки» помещались; на узком экране
   полоса прокручивается по горизонтали. */
.subtabs {
  display: flex; flex-wrap: nowrap; gap: 6px; padding: 2px 0 14px;
  overflow-x: auto; scrollbar-width: none; margin-bottom: 4px;
}
.subtabs::-webkit-scrollbar { display: none; }
.subtab {
  flex: 0 0 auto; border: 1px solid var(--line-2); background: var(--paper);
  color: var(--ink); padding: 9px 13px; border-radius: 999px;
  font-family: var(--ui); font-size: 12.5px; font-weight: 500;
  cursor: pointer; white-space: nowrap; min-height: 40px;
}
.subtab:hover { border-color: rgba(67,40,26,.28); }
.subtab.is-active {
  background: var(--sand); color: var(--paper);
  border-color: var(--sand); font-weight: 600;
}

.paysub, .docsub, .setsub { display: none; }
.paysub.is-active, .docsub.is-active, .setsub.is-active { display: block; animation: fade .2s ease; }

/* Значок на подвкладке — то же устройство, но компактнее */
.subbadge { margin-left: 6px; }
.subbadge .bdg__l { width: 16px; height: 16px; margin-right: 6px; }
.subbadge .bdg__s { top: -5px; right: -7px; min-width: 12px; height: 12px; font-size: 9px; }
.subbadge--money { padding: 1px 6px; }

.lead { margin: -6px 0 16px; }

.hint code, .lead code { background: var(--cream); border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 5px; }

/* ---------- Сворачиваемая форма ввода ---------- */
.formhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.formhead h2 { margin: 0; }

.seqinfo b { color: var(--brown); }
.nextnum { display: inline-block; background: var(--cream); border: 1px solid var(--gold);
  color: var(--brown); font-weight: 600; border-radius: 8px; padding: 2px 8px; font-variant-numeric: tabular-nums; }

/* ---------- Список файлов (документы/собрания/формы) ---------- */
.filelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.filelist li {
  display: flex; align-items: center; gap: 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow);
}
.filelist .fico { flex: 0 0 auto; color: var(--sand); display: flex; }
.filelist .fname { flex: 1; min-width: 0; font: 500 14px/1.35 var(--ui); color: var(--brown); word-break: break-word; }

.filelist a.btn { flex: 0 0 auto; text-decoration: none; }

/* ---------- Вложение под записью реестра ---------- */
.attach-cell { white-space: nowrap; }
.attach-link { color: var(--sand); font-weight: 600; text-decoration: none; }
.filefield input[type=file] { padding: 9px 12px; }
.filefield .filename { color: var(--muted); margin-top: 4px; }

/* ---------- Реквизиты / самоинкассация ---------- */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }

.kv dd { margin: 0; color: var(--ink); }
.cred { background: var(--cream); border: 1px dashed var(--gold); border-radius: 10px; padding: 12px 14px; margin-top: 12px; }
.cred b { color: var(--brown); }


/* ---------- Шаблоны номера (админ) ---------- */
.tmpl-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tmpl-row:last-child { border-bottom: none; }
.tmpl-row .tmpl-name { flex: 0 0 150px; font: 500 14px/1.35 var(--ui); color: var(--brown); }
.tmpl-row input { flex: 1; min-width: 140px; }
.tmpl-row .tmpl-preview { flex: 0 0 auto; }
.cntbox {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  color: var(--sand);
}
.cntbox input { width: 72px; padding: 8px 10px; text-align: center; }

/* ============================================================
   ТИПОГРАФИКА: заголовки — с засечками, текст — стандартный
   ============================================================ */
/* ============================================================
   ТИПОГРАФИЧЕСКИЙ СТАНДАРТ (вариант 14a)
   Шесть ролей, пять кеглей: 25 · 18 · 14 · 13 · 10.
   Прописные с разрядкой — только у третьей роли. Курсивов нет,
   третьей гарнитуры нет, кеглей вне списка нет.
   ============================================================ */

/* 1. Заголовок экрана */
h1, h2, .panel h2, .formhead h2 {
  font: 500 25px/1.2 var(--serif);
  letter-spacing: 0; color: var(--brown); text-transform: none;
}
/* 2. Заголовок карточки */
h3, .partner__name, .inv__title, .topbar__titles strong, .listcard__head h3 {
  font: 500 18px/1.28 var(--serif);
  letter-spacing: 0; text-transform: none;
}
.login__firm { font: 500 27px/1.2 var(--serif); letter-spacing: 0; }

/* 3. Подпись поля и шапка таблицы — единственное место прописных */
.field > span, th, .permgroup, .screen__cap, .login__hint,
.topbar .btn--ghost, .archive__t, .cntbox {
  font: 600 10px/1 var(--ui);
  letter-spacing: .16em; text-transform: uppercase; color: var(--sand);
}
/* 4. Значение */
input, textarea, select, td, .inv__sum, .stat__value, .seqinfo b, .kv dd {
  font: 500 14px/1.35 var(--ui); color: var(--brown); text-transform: none;
}
/* 5. Текст и пояснения */
.lead, .hint, .muted, .seqinfo, .login__sent, small, .note, .callout,
.partner__reg, .inv__who, .decree__meta, .fmeta, .kv dt, .empty, .msg {
  font: 300 13px/1.6 var(--ui); color: var(--muted); text-transform: none; letter-spacing: 0;
}
/* 6. Кнопки и таблетки — без прописных */
.btn, .pill, .tab, .subtab, button {
  font: 500 12.5px/1.2 var(--ui); text-transform: none; letter-spacing: 0;
}
.btn--primary, .tab.is-active, .subtab.is-active { font-weight: 600; }

/* Курсив в интерфейсе не используется */
i, em, .partner__name, .inv__title { font-style: normal; }
/* Третьей гарнитуры нет: токены в подсказках набираются тем же шрифтом,
   их выделяют рамка и фон, а не моноширинность */
code, kbd, samp { font-family: var(--ui); font-weight: 500; }
/* Заголовки лежат на орнаменте: лёгкий кремовый ореол гасит решётку
   под буквами. Кегль и вес не меняем — они заданы стандартом выше. */
.panel h2, .formhead h2 {
  margin: 4px 0 6px;
  text-shadow: 0 0 7px rgba(247,240,226,.95), 0 0 14px rgba(247,240,226,.8);
}
.panel h3, .lead, .seqinfo {
  text-shadow: 0 0 7px rgba(247,240,226,.9), 0 0 12px rgba(247,240,226,.7);
}
th { background: var(--cream); }

/* ---------- Переключатель режима администратора ---------- */
.admintgl {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.35); background: transparent; color: #E8D9C6;
  border-radius: 999px; padding: 6px 12px; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.admintgl__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.35); transition: background .15s ease, box-shadow .15s ease;
}
.admintgl.is-on {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #3a2a00; border-color: var(--gold);
}
.admintgl.is-on .admintgl__dot { background: #2E7D32; box-shadow: 0 0 0 3px rgba(46,125,50,.25); }

/* Полоса-индикатор режима администратора */
.adminbar {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #3a2a00; font: 500 13px/1 var(--ui); text-align: center; padding: 7px 12px;
}

/* ---------- Партнёры ---------- */
.partner {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 10px;
}
.partner.is-hidden-row { border-style: dashed; opacity: .75; }
.partner__ava {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--gold);
  display: grid; place-items: center; color: var(--brown);
  font: 500 14px/1 var(--serif);
}
.partner__body { flex: 1; min-width: 0; }
.partner__name { color: var(--brown); margin: 0 0 2px; }
.partner__reg { margin-bottom: 6px; }
.partner__contacts { display: flex; flex-direction: column; gap: 3px; font: 500 14px/1.5 var(--ui); }
.partner__contacts a { color: var(--ink); text-decoration: none; }
.partner__contacts a:hover { color: var(--gold); }
.partner__side { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.badge {
  display: inline-block; font: 600 10px/1.6 var(--ui); padding: 3px 8px;
  border-radius: 999px; background: var(--cream); color: var(--brown); border: 1px solid var(--line);
}
.badge--admin { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #3a2a00; border-color: var(--gold); }
.badge--hidden { background: #F3E9E7; color: var(--err); border-color: #E5C9C5; }

.partner__admin { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.permgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 14px; margin: 8px 0 12px; }
.permgrid label { display: flex; align-items: center; gap: 7px; }
.permgrid input { width: auto; accent-color: var(--gold); }
.permgroup { grid-column: 1 / -1; margin-top: 8px; }
.adminrow { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.adminrow label { display: flex; align-items: center; gap: 7px; font: 500 13px/1.5 var(--ui); }
.adminrow input[type=checkbox] { width: auto; accent-color: var(--gold); }

/* ---------- Загрузка документов (админ) ---------- */
.uploader { background: var(--cream); border: 1px dashed var(--gold); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.uploader .row2 { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.uploader .row2 > * { flex: 1; min-width: 150px; }
.uploader .row2 button { flex: 0 0 auto; }
.filelist .fdel { border: none; background: transparent; color: var(--err); cursor: pointer; padding: 4px 6px; }

/* ---------- Поиск по ИНН ---------- */
.innrow { display: flex; gap: 8px; align-items: flex-end; }
.innrow .field { flex: 1; }
.innbox {
  background: var(--cream); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; margin-top: 8px;
}
.innbox b { color: var(--brown); }
.innbox .ok { color: var(--ok); font-weight: 600; }
.innbox .bad { color: var(--err); font-weight: 600; }

/* ============================================================
   ОРНАМЕНТ: решётка косых линий из знака Z
   ============================================================ */
.app { position: relative; }

/* --- Светлая часть: полностью неподвижна, решётка вполсилы --------
   Дрейфующие слои убраны: под текстом ничего не должно шевелиться. */
.content::before, .content::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--orn-soft);
}
.content::before { background-size: 30px 45px;   opacity: .10; }  /* дальний ×0.5 */
.content::after  { background-size: 120px 180px; opacity: .05; }  /* ближний ×2   */
.app::before {                                                    /* основной ×1  */
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: var(--orn-soft); background-size: 60px 90px;
}

/* --- Тёмные плашки: по орнаменту медленно проходит золотой блик ---
   Градиент читаемости лежит в фоне самой плашки, чтобы ::after
   остался свободен под световой слой. */
.topbar {
  position: sticky;
  background-color: var(--dark);
  background-image: linear-gradient(90deg,
    rgba(42,23,14,.9), rgba(42,23,14,.55) 55%, rgba(42,23,14,.78));
}
.topbar::before {                        /* базовая решётка, притушена */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--orn-dark); background-size: 60px 90px; opacity: .5;
}
.topbar::after {                         /* световой слой под маской */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--orn-lit); background-size: 60px 90px;
  -webkit-mask-image: radial-gradient(circle,
    #fff 0%, rgba(255,255,255,.55) 45%, transparent 72%);
  mask-image: radial-gradient(circle,
    #fff 0%, rgba(255,255,255,.55) 45%, transparent 72%);
  -webkit-mask-size: 520px 520px; mask-size: 520px 520px;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: ornSweepBar 17s ease-in-out infinite;
}
.topbar > * { position: relative; z-index: 1; }

@keyframes ornSweepBar {
  0%   { -webkit-mask-position: -30% -120%; mask-position: -30% -120%; }
  50%  { -webkit-mask-position: 130% 220%;  mask-position: 130% 220%; }
  100% { -webkit-mask-position: -30% -120%; mask-position: -30% -120%; }
}
@keyframes ornSweepLogin {
  0%   { -webkit-mask-position: -25% -25%; mask-position: -25% -25%; }
  50%  { -webkit-mask-position: 125% 125%; mask-position: 125% 125%; }
  100% { -webkit-mask-position: -25% -25%; mask-position: -25% -25%; }
}

/* Свет гаснет, если система просит покоя */
@media (prefers-reduced-motion: reduce) {
  .topbar::after, .login::after {
    animation: none;
    -webkit-mask-image: none; mask-image: none;
    opacity: .3;
  }
}

/* ---------- Знаки-иконки разделов (алфавит бюро) ---------- */
.sign { display: block; flex: 0 0 auto; }
.tab__ico { display: inline-flex; align-items: center; color: var(--sand); }
.tab.is-active .tab__ico { color: var(--gold); }

/* ---------- Значки-индикаторы на кнопках разделов ---------- */
/* Буква и цифра — два отдельных элемента: «З» похожа на тройку и
   в одной плашке сливалась с числом в «35». */
.tabbadge, .subbadge {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 7px; padding: 0; background: none;
  vertical-align: middle; white-space: nowrap;
}
.bdg__l {                       /* буква в залитом кружке */
  position: relative; flex: 0 0 auto;
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font: 600 10px/1 var(--ui); font-style: normal; color: #fff;
  margin-right: 7px;            /* место под вынесенную цифру */
}
.bdg__s {                       /* количество — «в степени», у верхнего края */
  position: absolute; top: -6px; right: -8px;
  min-width: 13px; height: 13px; padding: 0 3px; box-sizing: border-box;
  border-radius: 999px; background: var(--paper);
  display: grid; place-items: center; vertical-align: baseline;
  font: 600 9px/1 var(--ui); font-style: normal;
  border: 1px solid currentColor;
}
.tabbadge--p .bdg__l, .subbadge--p .bdg__l { background: var(--err); }
.tabbadge--p .bdg__s, .subbadge--p .bdg__s { color: var(--err); }
.tabbadge--z .bdg__l, .subbadge--z .bdg__l { background: var(--ok); }
.tabbadge--z .bdg__s, .subbadge--z .bdg__s { color: var(--ok); }
.tabbadge--b .bdg__l, .subbadge--b .bdg__l { background: var(--sand); }
.tabbadge--b .bdg__s, .subbadge--b .bdg__s { color: var(--sand); }
.tabbadge--i .bdg__l, .subbadge--i .bdg__l { background: var(--gold); }
.tabbadge--i .bdg__s, .subbadge--i .bdg__s { color: var(--gold); }
.tabbadge--i { animation: badgePulse 1.8s ease-in-out infinite; }
.tab.is-active .bdg__l { box-shadow: 0 0 0 2px rgba(255,255,255,.35); }

/* Сумма долга — одной плашкой, буквы в ней нет */
.tabbadge--money, .subbadge--money {
  background: var(--err); color: #fff; padding: 2px 7px;
  border-radius: 999px; font: 600 10px/1.6 var(--ui);
}
@keyframes badgePulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.tabbadge--p { animation: badgePulse 1.8s ease-in-out infinite; }

/* ---------- Счета и оплата ---------- */
.inv {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 10px;
}
.inv--paid    { border-left: 4px solid var(--ok); }
.inv--partial { border-left: 4px solid var(--gold); }
.inv--unpaid  { border-left: 4px solid var(--err); }
.inv__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.inv__title { color: var(--brown); }

.inv__sums { font: 300 13px/1.6 var(--ui); color: var(--ink); margin: 6px 0 10px; display: flex; gap: 14px; flex-wrap: wrap; }
.inv__sums b { font-variant-numeric: tabular-nums; }
.inv__rest { color: var(--err); font-weight: 600; }
.inv__rest--ok { color: var(--ok); }
.inv__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inv__actions input { width: 150px; padding: 8px 10px; }
.badge--paid    { background: #E7F3E8; color: var(--ok);   border-color: #C6E2C8; }
.badge--partial { background: #FBF3E0; color: #8A5A22;     border-color: var(--gold-2); }
.badge--unpaid  { background: #F7E9E7; color: var(--err);  border-color: #E5C9C5; }

.sumbar {
  display: flex; gap: 18px; flex-wrap: wrap; background: var(--cream);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px;
}
.sumbar div { font: 300 13px/1.6 var(--ui); }
.sumbar b { display: block; font: 500 18px/1.28 var(--serif); color: var(--brown); font-variant-numeric: tabular-nums; }

/* ---------- Архивные данные ---------- */
.archive {
  background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--gold); border-radius: var(--radius-2);
  padding: 14px 16px; margin-top: 18px; box-shadow: var(--shadow);
}
.archive__t {
  margin-bottom: 8px;
}
.archive .hint { margin: 0 0 10px; }
.archive__row { display: flex; gap: 8px; flex-wrap: wrap; }
.formbtns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Приказы ---------- */
.decree {
  display: flex; align-items: center; gap: 12px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 16px; box-shadow: var(--shadow); margin-bottom: 8px;
}
.decree--none { border-left: 4px solid var(--err); }
.decree--ok   { border-left: 4px solid var(--ok); }
.decree__body { flex: 1; min-width: 0; }
.decree__title { font: 500 14px/1.35 var(--ui); color: var(--brown); }
.decree__meta { margin-top: 2px; }
.decree__text { font: 300 13px/1.6 var(--ui); color: var(--ink); margin-top: 5px; }
.decree { align-items: flex-start; }
.decree > .btn { margin-top: 2px; }
.pmark--z { background: var(--ok); }
.pmark {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font: 500 14px/1 var(--serif);
  background: var(--err); color: #fff;
}
.pmark--ok { background: var(--ok); }
td.decree-cell { white-space: nowrap; font-weight: 600; }
td.decree-cell .no  { color: var(--err); }
td.decree-cell .yes { color: var(--ok); }
td.decree-cell .res { color: var(--sand); }
.rowdel {
  border: 1px solid var(--line-2); background: var(--paper); color: var(--err);
  border-radius: 9px; padding: 5px 10px; cursor: pointer; white-space: nowrap;
}
.rowdel:hover { background: rgba(179,38,30,.06); border-color: var(--err); }

/* ---------- Реквизиты ответа на запрос ---------- */
.replyrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.replyrow input { flex: 1 1 240px; min-width: 200px; padding: 9px 12px; }
.replyrow .btn { flex: 0 0 auto; }

/* ---------- Забронированные номера ---------- */
.resv { border-left: 4px solid var(--sand); }
.resv .pmark--b { background: var(--sand); }
.resv__fields { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.resv__fields .row { gap: 8px; }

/* ---------- Подкрепление партнёров к соглашению ---------- */
.copartners {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px;
  background: #FFF;
}
.copartners label {
  display: flex; align-items: center; gap: 7px;
  font: 500 13px/1.5 var(--ui); color: var(--brown); cursor: pointer;
}
.copartners input[type=checkbox] { width: auto; accent-color: var(--gold); }

/* ---------- Информация: сообщения администратора ---------- */
.ann {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-2); box-shadow: var(--shadow);
  margin-bottom: 10px; overflow: hidden;
}
.ann--new { border-color: var(--gold); }
.ann__head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 13px 16px; background: none; border: none; cursor: pointer;
  text-align: left; font-family: var(--ui);
}
.ann__head:hover { background: rgba(201,153,47,.06); }
.ann__dot {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px rgba(201,153,47,.2);
}
.ann__title { flex: 1; min-width: 0; font: 500 14px/1.4 var(--ui); color: var(--brown); }
.ann--new .ann__title { font-weight: 600; }
.ann__clip { flex: 0 0 auto; color: var(--sand); display: grid; place-items: center; }
.ann__date { flex: 0 0 auto; font: 400 12px/1.4 var(--ui); color: var(--muted); }
.ann__body { padding: 0 16px 14px; border-top: 1px solid var(--line); }
.ann__text { font: 300 14px/1.65 var(--ui); color: var(--ink); margin: 12px 0 0; word-break: break-word; }
.ann__files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ann__file {
  display: inline-block; padding: 7px 12px; border: 1px solid var(--gold);
  border-radius: 999px; background: var(--cream); color: var(--sand);
  text-decoration: none; font: 500 13px/1.4 var(--ui);
}
.ann__file:hover { background: rgba(201,153,47,.1); }
.ann__del { margin-top: 12px; color: var(--err); }

@media (max-width: 460px) {
  .row { flex-direction: column; }
  td.content { max-width: 180px; }
  .tmpl-row .tmpl-name { flex-basis: 100%; }
  .inv__actions input { width: 100%; }
}