/* Админ-панель CheckAudit: цвета логотипа (тёмно-синий и зелёный), светлая и тёмная тема.
   Без cookie ca_theme панель следует системе; с ним — <html data-theme="light|dark">. */
:root {
  color-scheme: light;
  --navy: #1E3A5F; --green: #2E9E5B; --red: #B00020; --amber: #9A6A00;
  --ink: #1F2937; --muted: #6B7280; --line: #D3DAE3; --line-soft: #E6EAF0; --bg: #F5F7FA; --card: #FFFFFF;
  --raise: 0 1px 2px rgba(16, 24, 40, .06);
  --field: #FFFFFF; --field-line: #CBD5E1; --focus: #9DB7D8; --head: #F0F3F8;
  --soft: #E8EEF6; --soft-hover: #D6E1EF;
  --primary: #1E3A5F; --primary-hover: #16304F; --on-primary: #FFFFFF;
  --done-bg: #E7F6EC; --done-ink: #1C6B3B; --error-bg: #FDECEE; --notice-bg: #FFF6E0; --blocked-bg: #3F3F46;
  --side: #1E3A5F; --side-ink: #C9D6E6; --side-hover: rgba(255, 255, 255, .08); --side-on: rgba(255, 255, 255, .14);
  --shadow: 0 10px 30px rgba(15, 23, 42, .14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --navy: #93B8E4; --green: #4CC17F; --red: #FF7A8A; --amber: #E3B65A;
    --ink: #E5E7EB; --muted: #9CA3AF; --line: #2A3443; --line-soft: #2A3443; --bg: #0F1620; --card: #17202C;
    --raise: none;
    --field: #111923; --field-line: #344154; --focus: #4A6E99; --head: #1C2633;
    --soft: #223047; --soft-hover: #2C3D59;
    --primary: #3B6EA8; --primary-hover: #4A7DB8; --on-primary: #FFFFFF;
    --done-bg: #133222; --done-ink: #7BD6A0; --error-bg: #3A1A20; --notice-bg: #3A2E12; --blocked-bg: #52525B;
    --side: #111A27; --side-ink: #AFC0D6; --side-hover: rgba(255, 255, 255, .06); --side-on: rgba(255, 255, 255, .11);
    --shadow: 0 10px 30px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --navy: #93B8E4; --green: #4CC17F; --red: #FF7A8A; --amber: #E3B65A;
  --ink: #E5E7EB; --muted: #9CA3AF; --line: #2A3443; --line-soft: #2A3443; --bg: #0F1620; --card: #17202C;
    --raise: none;
  --field: #111923; --field-line: #344154; --focus: #4A6E99; --head: #1C2633;
  --soft: #223047; --soft-hover: #2C3D59;
  --primary: #3B6EA8; --primary-hover: #4A7DB8; --on-primary: #FFFFFF;
  --done-bg: #133222; --done-ink: #7BD6A0; --error-bg: #3A1A20; --notice-bg: #3A2E12; --blocked-bg: #52525B;
  --side: #111A27; --side-ink: #AFC0D6; --side-hover: rgba(255, 255, 255, .06); --side-on: rgba(255, 255, 255, .11);
  --shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 "Segoe UI", Arial, sans-serif; color: var(--ink); background: var(--bg); }
a { color: var(--navy); }
svg.icon { width: 18px; height: 18px; flex: none; }

/* -- расположение: меню слева, сверху панель с темой и профилем ------------------------------------ */
body.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.content { display: flex; flex-direction: column; min-height: 100vh; min-width: 0; }
.content main { flex: 1; width: 100%; }
.brand { font-weight: 700; font-size: 20px; text-decoration: none; white-space: nowrap; }
.brand .c { color: var(--navy); } .brand .a { color: var(--green); }
.brand small { color: var(--muted); font-weight: 400; font-size: 13px; }

aside.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--side); padding: 18px 12px; }
.side .brand { display: block; padding: 2px 12px 22px; }
.side .brand .c { color: #FFFFFF; } .side .brand small { color: var(--side-ink); }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; color: var(--side-ink);
              text-decoration: none; font-size: 14.5px; white-space: nowrap; }
.side nav a:hover { background: var(--side-hover); color: #FFFFFF; }
.side nav a.on { background: var(--side-on); color: #FFFFFF; box-shadow: inset 3px 0 0 var(--green); }

header.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 14px; padding: 8px 24px;
             min-height: 58px; background: var(--card); border-bottom: 1px solid var(--line); }
.spacer { flex: 1; }

form.theme { display: flex; gap: 2px; margin: 0; padding: 3px; background: var(--soft); border-radius: 999px; }
form.theme button { padding: 6px; line-height: 0; color: var(--muted); background: none; border-radius: 999px; }
form.theme button:hover { color: var(--ink); background: none; }
form.theme svg.icon { width: 16px; height: 16px; }
:root:not([data-theme]) form.theme button[value="light"], :root[data-theme="light"] form.theme button[value="light"],
:root[data-theme="dark"] form.theme button[value="dark"] { color: var(--navy); background: var(--card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) form.theme button[value="light"] { color: var(--muted); background: none; box-shadow: none; }
  :root:not([data-theme]) form.theme button[value="dark"] { color: var(--navy); background: var(--card);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
}

details.profile { position: relative; }
details.profile > summary { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: 999px;
                            cursor: pointer; list-style: none; color: var(--muted); }
details.profile > summary::-webkit-details-marker { display: none; }
details.profile > summary:hover, details.profile[open] > summary { background: var(--soft); }
details.profile[open] > summary svg.icon { transform: rotate(180deg); }
.who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.who b { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who small { font-size: 12px; color: var(--muted); }
img.avatar { width: 34px; height: 34px; border-radius: 50%; display: block; flex: none; }
img.avatar.small { width: 28px; height: 28px; }
img.avatar.big { width: 44px; height: 44px; }
img.avatar.huge { width: 72px; height: 72px; }
.menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 270px; padding: 6px; background: var(--card);
        border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.menu .head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; margin-bottom: 6px;
              border-bottom: 1px solid var(--line); }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px;
                        font: inherit; font-size: 14px; color: var(--ink); background: none; text-decoration: none; text-align: left; }
.menu a:hover, .menu button:hover { background: var(--soft); }
.menu svg.icon { color: var(--muted); }
.menu form { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--line); }
.menu button.out, .menu button.out svg.icon { color: var(--red); }

main { max-width: 1200px; margin: 24px auto; padding: 0 24px; }
main.narrow { max-width: 568px; }
/* страница карточек с карточкой рядом (история организации): боковая карточка заканчивается там же, где
   карточки слева, и прокручивается внутри; на телефоне она уходит под них во всю длину */
main.with-side { max-width: 1000px; }
.split { display: grid; grid-template-columns: minmax(0, 568px) minmax(0, 1fr); gap: 0 16px; }
.split-side { position: relative; }
.split-side > .card { position: absolute; top: 0; left: 0; right: 0; max-height: calc(100% - 16px);
  display: flex; flex-direction: column; }
.history-list { list-style: none; margin: 0; padding: 0 8px 0 0; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.history-list li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.history-list li:first-child { border-top: none; padding-top: 0; }
.history-head { display: flex; justify-content: space-between; gap: 8px; }
.history .button { margin-top: 12px; align-self: flex-start; }
@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split-side > .card { position: static; max-height: none; }
}
h1 { font-size: 22px; color: var(--navy); display: flex; align-items: center; gap: 16px; }
footer { text-align: center; color: var(--muted); font-size: 12px; margin: 40px 0 16px; }

@media (max-width: 860px) {
  body.app { display: block; }
  aside.side { position: static; height: auto; display: flex; align-items: center; gap: 12px; padding: 8px 12px; overflow: visible; }
  .side .brand { padding: 0 8px; }
  .side .brand small { display: none; }
  .side nav { flex-direction: row; overflow-x: auto; }
  .side nav a { padding: 7px 10px; }
  .side nav a span { display: none; }
  .side nav a.on { box-shadow: inset 0 -3px 0 var(--green); }
  header.top { padding: 8px 16px; }
  details.profile .who { display: none; }
  main { padding: 0 16px; }
}

/* -- содержимое ----------------------------------------------------------------------------------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 20px; margin: 0 0 16px;
        box-shadow: var(--raise); }
label { display: block; margin: 0 0 12px; font-size: 14px; color: var(--muted); }
label.check { display: flex; gap: 8px; align-items: center; color: var(--ink); }
input, select, textarea { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; font: inherit; color: var(--ink);
                border: 1px solid var(--field-line); border-radius: 6px; background: var(--field); }
input[type=checkbox] { display: inline; width: auto; margin: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); border-color: var(--navy); }
button, .button { display: inline-block; padding: 8px 18px; font: inherit; color: var(--on-primary); background: var(--primary);
                  border: 0; border-radius: 6px; cursor: pointer; text-decoration: none; font-size: 14px; }
button:hover, .button:hover { background: var(--primary-hover); }
button.danger { background: var(--red); color: #FFFFFF; }
:root[data-theme="dark"] button.danger { background: #C23A4E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) button.danger { background: #C23A4E; } }
button.link { background: none; color: var(--navy); padding: 0; text-decoration: underline; }
.done { background: var(--done-bg); color: var(--done-ink); padding: 10px 14px; border-radius: 6px; }
.error { background: var(--error-bg); color: var(--red); padding: 10px 14px; border-radius: 6px; }
.notice { background: var(--notice-bg); color: var(--amber); padding: 10px 14px; border-radius: 6px; }
.hint { color: var(--muted); font-size: 13px; }
table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); box-shadow: var(--raise); }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { border-bottom-color: var(--line); }
th { background: var(--head); font-weight: 600; font-size: 13px; color: var(--muted); }
td.pic { width: 44px; padding: 5px 4px 5px 10px; vertical-align: middle; }
tr.off td { color: var(--muted); }
.nowrap { white-space: nowrap; }
code.details { font-size: 12px; color: var(--muted); word-break: break-all; }
.filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.filters label { margin: 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; color: var(--muted);
        box-shadow: var(--raise); }
.tile .n { display: block; font-size: 28px; font-weight: 700; color: var(--navy); }
.qr { text-align: center; }
.qr img { width: 220px; height: 220px; padding: 10px; background: #FFFFFF; border-radius: 8px; }
code.secret { font-size: 15px; color: var(--ink); letter-spacing: 1px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge.trial { background: var(--soft); color: var(--navy); }
.badge.active { background: var(--done-bg); color: var(--done-ink); }
.badge.expired { background: var(--error-bg); color: var(--red); }
.badge.blocked { background: var(--blocked-bg); color: #FFFFFF; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.card h2 { font-size: 16px; color: var(--navy); margin: 0 0 12px; }
.inline { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin: 0; }
.inline label { margin: 0; flex: 1; min-width: 120px; }
.inline label.short { flex: 0 0 110px; min-width: 0; }
td form.inline input { padding: 4px 8px; }
td form.inline button, button.small { padding: 4px 10px; font-size: 13px; }
tr.cancelled td { color: var(--muted); text-decoration: line-through; }
tr.cancelled td.reason { text-decoration: none; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }
.card.person { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.card.person dl.facts { flex: 1; align-items: center; }
dd.editable { display: flex; align-items: center; gap: 6px; min-height: 30px; }
a.pencil { display: inline-flex; padding: 5px; border-radius: 6px; color: var(--muted); }
a.pencil:hover { color: var(--navy); background: var(--soft); }
a.pencil svg.icon { width: 15px; height: 15px; }
dd.editable input.edit { margin: 0; padding: 4px 8px; }
.person .edit { display: none; }
.person.editing .shown { display: none; }
.person.editing .edit { display: block; }
.person.editing .edit.actions { display: flex; }
.person .shown.actions { display: flex; flex-basis: 100%; justify-content: flex-end; gap: 10px; padding-top: 14px;
                         border-top: 1px solid var(--line); }
.person.editing .shown.actions { display: none; }
a.forgot { margin-left: 16px; }  /* «Забыли пароль?» рядом с «Далее» */
button:disabled, button:disabled:hover { opacity: .5; cursor: not-allowed; }
.edit.actions { flex-basis: 100%; justify-content: flex-end; align-items: center; gap: 14px; padding-top: 14px;
                border-top: 1px solid var(--line); }
.tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .tiles.three { grid-template-columns: minmax(0, 1fr); } }
nav.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 14px 0 0; font-size: 14px; }
nav.pager a, nav.pager span { min-width: 34px; padding: 5px 10px; border-radius: 6px; text-align: center; text-decoration: none; }
nav.pager a { color: var(--navy); background: var(--card); border: 1px solid var(--line); }
nav.pager a:hover { background: var(--soft); }
nav.pager .on { color: var(--on-primary); background: var(--primary); border: 1px solid var(--primary); font-weight: 600; }
nav.pager .off, nav.pager .gap { color: var(--muted); }
nav.pager .off { border: 1px solid transparent; opacity: .6; }
nav.pager .total { margin-left: auto; color: var(--muted); }
.search { display: flex; gap: 8px; margin-bottom: 16px; }
.search input { max-width: 360px; margin: 0; }
.big { font-size: 18px; }
.card :not(input[type="hidden"]) ~ h2 { margin-top: 22px; }  /* заголовок после содержимого, а не после поля csrf */
.button.light { background: var(--soft); color: var(--navy); }
.button.light:hover { background: var(--soft-hover); }
.section { margin-top: 28px; }
.tile.warn .n { color: var(--amber); } .tile.bad .n { color: var(--red); }
a.tile { text-decoration: none; } a.tile:hover { border-color: var(--focus); }
.req { color: var(--red); font-weight: 700; }
h1.wrap { flex-wrap: wrap; }
h1 .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; font-size: 14px; font-weight: 400; }
.button small { margin-left: 4px; opacity: .7; }
p.row { margin: 6px 0; }
p.row.off a { color: var(--muted); }
.grid2.section { margin-top: 20px; }
/* карточка, свёрнутая до заголовка и «Добавить» (admin.js её разворачивает) */
.card.folded .fold, .card:not(.folded) [data-unfold] { display: none; }
.button.cancel { background: var(--red); color: #FFFFFF; }
.button.cancel:hover { background: #8E0019; }
:root[data-theme="dark"] .button.cancel { background: #C23A4E; }
:root[data-theme="dark"] .button.cancel:hover { background: #A82E40; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .button.cancel { background: #C23A4E; } :root:not([data-theme="light"]) .button.cancel:hover { background: #A82E40; } }
/* поле с маленькой кнопкой рядом (пароль и «Сгенерировать») */
.field-row { display: flex; gap: 8px; align-items: center; margin: 4px 0 12px; }
.field-row input { margin: 0; flex: 1; }
button.icon-button { display: inline-flex; align-items: center; justify-content: center; flex: none;
                     width: 38px; height: 38px; padding: 0; background: var(--soft); color: var(--navy); }
button.icon-button:hover { background: var(--soft-hover); }
/* «Скопировать»: значок копирования, на мгновение галочка после щелчка */
button[data-copy] .icon + .icon, button[data-copy].copied .icon:first-child { display: none; }
button[data-copy].copied .icon + .icon { display: inline; color: var(--green); }
input.readonly { background: var(--soft); cursor: default; }
input.readonly.muted { color: var(--muted); }
label.tight { margin-bottom: 0; }
/* заголовок списка, его «Добавить» и поиск в одну строку */
.list-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 15px 0 16px; }
.list-head h1 { margin: 0; }
.list-head .search { margin: 0 0 0 auto; justify-content: flex-end; flex-wrap: wrap; }  /* справа */
.list-head .search input { width: 300px; }
.list-head .search select { width: auto; margin: 0; }
.clamp { max-height: 4.4em; overflow: hidden; line-height: 1.45; }
.clamp.open { max-height: none; }
.clamp.cut { -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.clamp code.details { line-height: inherit; }
button.more { margin-top: 2px; font-size: 12px; }
[hidden] { display: none !important; }
textarea { resize: vertical; }
.upload { margin-top: 16px; }