:root {
  --bg: #f4f5f7;
  --card: #ffffff;
  --border: #d9dce1;
  --text: #1c1f23;
  --muted: #6b7280;
  --accent: #1f6feb;
  --ok-bg: #e7f6ec;
  --ok-text: #14622f;
  --err-bg: #fdecea;
  --err-text: #8c1d18;
  --warn-bg: #fff6e0;
  --warn-text: #7a5300;
}

* { box-sizing: border-box; }
/* Атрибут hidden сильнее классов с display (.hint и т.п.). */
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.topbar nav { display: flex; gap: 20px; align-items: baseline; }
.topbar a { color: var(--text); text-decoration: none; }
.topbar a:hover { color: var(--accent); }
.brand { font-weight: 600; }

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 16px 60px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

main.wide { max-width: none; padding-left: 24px; padding-right: 24px; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
}

.card.login { max-width: 360px; margin: 12vh auto 0; }

h1 { font-size: 18px; margin: 0 0 14px; }

label { display: block; margin: 12px 0 4px; font-weight: 500; }
label.checkbox { display: flex; align-items: center; gap: 8px; font-weight: 400; }
label.checkbox input { width: auto; }

input, select, textarea {
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
}

textarea { resize: vertical; }

input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
input.invalid { border-color: var(--err-text); }

.row { display: flex; gap: 12px; }
.row > * { flex: 1; min-width: 0; }

.hint, .muted { color: var(--muted); font-size: 13px; }
.hint { display: block; margin-top: 4px; }

button { font: inherit; cursor: pointer; }

button.primary {
  margin-top: 16px;
  padding: 10px 18px;
  border: 0;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font-weight: 500;
}

button.primary:disabled { opacity: .55; cursor: progress; }

button.link {
  border: 0;
  background: none;
  color: var(--accent);
  padding: 0;
  text-decoration: underline;
}

button.small {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
}

.actions { display: flex; align-items: center; gap: 16px; }

.banner {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 7px;
  background: var(--warn-bg);
  color: var(--warn-text);
}

.banner.ok { background: var(--ok-bg); color: var(--ok-text); }
.banner.error { background: var(--err-bg); color: var(--err-text); }

.address-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.address-grid > p.muted { grid-column: 1 / -1; margin: 0; }

.address-block {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  text-align: left;
  color: inherit;
}

.address-block:hover { border-color: var(--accent); }
.address-block[aria-pressed="true"] { border-color: var(--accent); background: #e3edff; }

.address-block-title { font-weight: 600; }

.status-badge {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
}

.status-badge.online { background: var(--ok-bg); color: var(--ok-text); }
.status-badge.offline { background: var(--err-bg); color: var(--err-text); }
.status-badge.checking { background: var(--bg); color: var(--muted); }
.status-badge.closed { background: var(--bg); color: var(--muted); }

.address-block.closed { background: var(--bg); cursor: default; }
.address-block.closed:hover { border-color: var(--border); }

/* Страница «Адреса»: скрытые с главной блоки кликабельны (их можно править). */
.address-block.inactive { background: var(--bg); }
.address-block-badges { display: flex; flex-wrap: wrap; gap: 6px; }

h2 { font-size: 15px; margin: 22px 0 0; }
main > .banner { margin: 0; }

.modal-actions { margin-top: 16px; }
.modal-actions button.primary { margin-top: 0; }
.push-right { margin-left: auto; }
button.danger { color: var(--err-text); }
button:disabled { cursor: not-allowed; opacity: .55; }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-head h1 { margin-bottom: 0; }
.sync-status { margin: 6px 0 10px; min-height: 1em; }

dialog.modal {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 20px 50px rgba(15, 20, 30, .25);
}
dialog.modal::backdrop { background: rgba(15, 20, 30, .45); }
.modal-body { padding: 20px; }

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.modal-head h1 { margin: 0; }
.modal-close {
  border: 0;
  background: none;
  padding: 0 4px;
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
}
.modal-close:hover { color: var(--text); }

table { width: 100%; border-collapse: collapse; margin-top: 12px; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); }
th { font-size: 13px; color: var(--muted); font-weight: 500; }
td.mono, .keys td:first-child { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

.status-ok { color: var(--ok-text); }
.status-error { color: var(--err-text); }
.status-duplicate { color: var(--warn-text); }
.status-pending { color: var(--muted); }
.status-waiting_offline { color: var(--warn-text); }

.queue-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.queue-list:empty { margin: 0; }

.queue-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 14px;
}

.queue-card { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 600; }
.queue-flat { color: var(--muted); white-space: nowrap; }
.queue-status { margin-left: auto; }

/* --- калитки -------------------------------------------------------------- */

.status-badge.gate { background: #efe7ff; color: #5b2bb5; }
.banner.gate-note { background: #efe7ff; color: #4a2296; }

.commutator-info { margin: 14px 0 0; }

.queue-where {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 12px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
}
.queue-where.gate { background: #efe7ff; color: #5b2bb5; }

/* Окно «куда записываем» шире обычного: слева калитка, справа подъезды. */
dialog.gate-modal { width: min(760px, calc(100vw - 32px)); }
.gate-lead { margin: 6px 0 16px; }

.gate-map {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1.3fr);
  align-items: center;
}
.gate-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.gate-card {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  border: 1px solid #c9b6f2;
  border-radius: 10px;
  background: #f7f2ff;
}
.gate-card-title { font-weight: 600; }
.gate-porches {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gate-porches > p { margin: 0; }
.gate-porch {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 10px;
  row-gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  text-align: left;
  color: inherit;
}
.gate-porch:hover:not(:disabled) { border-color: var(--accent); }
.gate-porch:disabled { background: var(--bg); }
.gate-porch > .status-badge,
.gate-porch > .address-block-badges { grid-column: 2; justify-self: start; }
.gate-porch-label {
  grid-row: span 2;
  min-width: 38px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #e3edff;
  color: var(--accent);
  font-weight: 700;
  text-align: center;
}
.gate-porch:disabled .gate-porch-label { background: var(--border); color: var(--muted); }

.gate-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  animation: gate-draw .6s ease-out forwards;
}
.gate-head {
  fill: var(--accent);
  animation: gate-fade .2s .5s both;
}
.gate-line.disabled { stroke: var(--border); }
.gate-head.disabled { fill: var(--border); }

@keyframes gate-draw { to { stroke-dashoffset: 0; } }
@keyframes gate-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .gate-line { animation: none; stroke-dashoffset: 0 !important; }
  .gate-head { animation: none; }
}

/* --- комментарии и СКУД --------------------------------------------------- */

.address-star {
  position: absolute;
  top: 8px;
  right: 10px;
  color: #d99a00;
  font-size: 18px;
  line-height: 1;
}
.address-block:has(.address-star) .address-block-title { padding-right: 18px; }

.banner.comment-note { background: #fff8db; color: #6b4f00; white-space: pre-wrap; }

/* Окно записи ключа у домофона со СКУД: справа блок с галочками. */
dialog.modal.with-skud { width: min(860px, calc(100vw - 32px)); }
dialog.with-skud .key-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  column-gap: 20px;
  align-items: start;
}
dialog.with-skud .key-form-box { grid-column: 1; grid-row: 1; }
dialog.with-skud .skud-aside { grid-column: 2; grid-row: 1 / span 2; }
dialog.with-skud .key-rest { grid-column: 1; grid-row: 2; }
.skud-aside {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
.skud-aside h2 { margin: 0 0 4px; }
.skud-aside p { margin: 0 0 6px; }
.skud-options label.checkbox { margin: 8px 0 0; }
.queue-where.skud { background: var(--warn-bg); color: var(--warn-text); white-space: normal; }

/* Страница «Адреса»: окно домофона. */
.extra-block { margin-top: 16px; }
.extra-block > button.small { margin-top: 8px; }
.field-title { display: block; margin: 0 0 4px; font-weight: 500; }
.skud-rows { display: flex; flex-direction: column; gap: 6px; }
.skud-row { display: flex; gap: 6px; align-items: center; }
.skud-row button { flex-shrink: 0; }
.status-badge.skud { background: var(--warn-bg); color: var(--warn-text); }
.table-scroll { overflow-x: auto; }
.status-done { color: var(--ok-text); }
.max-link a, .max-link code { word-break: break-all; }
#max-problems { white-space: pre-line; word-break: break-word; }

@media (max-width: 720px) {
  .gate-map { grid-template-columns: 1fr; gap: 14px; }
  .gate-arrows { display: none; }
  .gate-card, .gate-porches { grid-column: 1; }
  dialog.with-skud .key-layout { display: block; }
}

@media (max-width: 520px) {
  .row { flex-direction: column; }
  main.wide { padding-left: 12px; padding-right: 12px; }
}