/* ТриажСим — общ стил. Ванилен CSS, без рамки и без build стъпка. */

:root {
  --green:  #2E8B57;
  --yellow: #D99A2B;
  --red:    #C0392B;
  --black:  #2B2B2B;
  --undet:  #9AA0A6;

  --ink:    #1d2126;
  --ink-2:  #5b646e;
  --line:   #d8dee5;
  --bg:     #f4f6f8;
  --panel:  #ffffff;
  --accent: #1f5f8b;

  --r: 6px;
  --shadow: 0 1px 2px rgba(20,30,40,.08), 0 4px 14px rgba(20,30,40,.05);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font: 15px/1.5 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); }
a:hover { color: #14405f; }
code { font: 13px/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace; background: #eef1f4;
       padding: 1px 4px; border-radius: 3px; }
h1 { font-size: 22px; margin: 0 0 14px; }
h2 { font-size: 17px; margin: 24px 0 10px; }
h3 { font-size: 15px; margin: 18px 0 8px; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }
.strong { font-weight: 600; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Лента отгоре ───────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 0 16px; height: 48px;
  background: #172633; color: #e8eef4;
  box-shadow: var(--shadow); flex: none;
}
.topbar a { color: #cfe0ee; text-decoration: none; }
.topbar a:hover { color: #fff; }

/* Логото е тъмносиньо (#003060) — на тъмната лента се губи, затова стои
   върху светла подложка. */
.brand { display: flex; align-items: center; gap: 9px; flex: none;
  font-weight: 700; letter-spacing: .3px; font-size: 16px; }
.brand img { display: block; height: 22px; width: auto; padding: 4px 6px;
  background: #fff; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.brand:hover img { background: #f2f6fa; }
.crumbs { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.crumbs .sess-code { font: 600 13px/1 ui-monospace, Consolas, monospace;
  background: #24384a; padding: 5px 8px; border-radius: 4px; }
.crumbs a { padding: 4px 2px; border-bottom: 2px solid transparent; font-size: 14px; }
.crumbs a.on { border-color: #5aa9e6; color: #fff; }
.spacer { flex: 1; }
.who { font-size: 13px; color: #b9c9d6; }
.role { font-style: normal; font-size: 11px; text-transform: uppercase;
  letter-spacing: .5px; padding: 2px 6px; border-radius: 3px; margin-left: 6px; background: #34495c; }
.role-doctor { background: #2E8B57; color: #fff; }
.role-admin  { background: #7d3c98; color: #fff; }
.btn-plain { font-size: 13px; }

/* ── Основно тяло ───────────────────────────────────────────────────────── */
main { flex: 1 0 auto; }
main.wrap { max-width: 1240px; width: 100%; margin: 0 auto; padding: 20px 16px 32px; }
main.full { padding: 12px; }

.pagehead { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.pagehead h1 { margin: 0; }

/* ── Долен колонтитул (задължителен текст) ──────────────────────────────── */
.sitefoot {
  flex: none; margin-top: 24px; padding: 12px 16px;
  border-top: 1px solid var(--line); background: #eceff3;
  color: var(--ink-2); font-size: 12.5px; text-align: center;
}
.sitefoot strong { color: #8a2b22; }

/* ── Бутони ─────────────────────────────────────────────────────────────── */
.btn, button {
  display: inline-block; font: inherit; cursor: pointer;
  padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; color: var(--ink); text-decoration: none;
}
.btn:hover, button:hover { background: #f0f3f6; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: #17506f; color: #fff; }
.btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn-danger:hover { background: #9d2f22; color: #fff; }
button[disabled], .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Форми ──────────────────────────────────────────────────────────────── */
label { display: block; margin: 10px 0; font-size: 13.5px; color: var(--ink-2); }
input[type=text], input[type=password], input[type=number], input[type=datetime-local],
input[type=file], select, textarea {
  display: block; width: 100%; margin-top: 4px; padding: 7px 9px;
  font: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
}
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid #a9cbe6; border-color: var(--accent); }
fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; margin: 0 0 16px; }
legend { padding: 0 6px; font-weight: 600; font-size: 14px; }
.formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 16px; }

/* ── Съобщения ──────────────────────────────────────────────────────────── */
.note { padding: 9px 12px; border-radius: var(--r); border-left: 4px solid; margin: 10px 0; font-size: 14px; }
.note-info { background: #eaf2f8; border-color: #4a90c4; }
.note-ok   { background: #e9f5ee; border-color: var(--green); }
.note-warn { background: #fdf3e2; border-color: var(--yellow); }
.note-err  { background: #fbeae8; border-color: var(--red); }

/* ── Таблици ────────────────────────────────────────────────────────────── */
table.grid, table.kv { border-collapse: collapse; width: 100%; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
table.grid th, table.grid td, table.kv th, table.kv td {
  padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.grid thead th { background: #eef1f5; font-size: 12.5px; text-transform: uppercase;
  letter-spacing: .3px; color: var(--ink-2); }
table.grid tbody tr:hover { background: #f7f9fb; }
table.kv th { width: 190px; color: var(--ink-2); font-weight: 600; background: #f7f9fb; }
.acts a { margin-right: 10px; font-size: 13px; white-space: nowrap; }
.tablewrap { overflow-x: auto; }

ul.steps, ul.hints, ol.hints { margin: 8px 0 0 18px; padding: 0; }
ul.steps li, ul.hints li, ol.hints li { margin: 4px 0; }

/* ── Етикети и цветове на категориите ───────────────────────────────────── */
.pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px;
  background: #e7ebef; color: var(--ink-2); white-space: nowrap; }
.st-validated { background: #e9f5ee; color: #1e6b41; }
.st-ingested  { background: #eaf2f8; color: #1c5a80; }
.st-calibrated{ background: #fdf3e2; color: #8a6116; }
.st-draft     { background: #eceff3; }
.st-closed    { background: #e4e6e9; }

.cat { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 12px;
  font-weight: 600; color: #fff; white-space: nowrap; }
.cat-GREEN  { background: var(--green); }
.cat-YELLOW { background: var(--yellow); }
.cat-RED    { background: var(--red); }
.cat-BLACK  { background: var(--black); }
.cat-UNDETERMINED { background: #fff; color: #8a2b22; border: 1.5px solid var(--red);
  box-shadow: inset 0 0 0 2px var(--undet); }
.cat-none { background: #e7ebef; color: var(--ink-2); }
.cat-NOT_PERSON { background: #fff; color: #5f6b76; border: 1.5px dashed #8a949e; text-decoration: line-through; }

.rmse.ok   { color: #1e6b41; font-weight: 600; }
.rmse.warn { color: #8a6116; font-weight: 600; }
.rmse.err  { color: #a8281a; font-weight: 700; }

/* ── Вход ───────────────────────────────────────────────────────────────── */
.loginpage main { display: flex; align-items: center; justify-content: center; }
.loginbox { width: 100%; max-width: 360px; background: var(--panel); padding: 26px 24px;
  border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
  text-align: center; }
.loginbox form, .loginbox label { text-align: left; }
.loginbox .logo { display: block; width: 158px; height: auto; margin: 0 auto 14px; }
/* На входа знакът е голям в кутията — в лентата остава само името. */
.loginpage .brand img { display: none; }
.loginbox h1 { margin-bottom: 2px; }
.loginbox .sub { margin: 0 0 18px; color: var(--ink-2); font-size: 13.5px; }
.loginbox button { width: 100%; margin-top: 8px; }

/* ── Команден център: три зони ──────────────────────────────────────────── */
.cc { display: grid; grid-template-columns: minmax(300px, 1.05fr) minmax(340px, 1.25fr) minmax(310px, .95fr);
  gap: 12px; align-items: start; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); }
.card > h2 { margin: 0; padding: 9px 12px; font-size: 14px; border-bottom: 1px solid var(--line);
  background: #f7f9fb; display: flex; align-items: center; gap: 10px; }
.card > h2 .spacer { flex: 1; }
.card .body { padding: 12px; }

/* Ленти с показатели */
.stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 6px 12px; min-width: 92px; box-shadow: var(--shadow); }
.stat b { display: block; font-size: 20px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat span { font-size: 11.5px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .3px; }
.stat.s-GREEN b  { color: var(--green); }
.stat.s-YELLOW b { color: var(--yellow); }
.stat.s-RED b    { color: var(--red); }
.stat.s-BLACK b  { color: var(--black); }
.stat.s-UNDETERMINED b { color: #8a2b22; }
.stat.s-pending b { color: var(--accent); }
.stat.s-NOT_PERSON b { color: #8a949e; }

/* Карта */
#map { height: 480px; border-radius: 0 0 var(--r) var(--r); background: #dfe6ec; }
#svgmap { display: none; height: 480px; background: #f0f3f6; }
#svgmap svg { width: 100%; height: 100%; display: block; }
.mapmark { border: none !important; background: transparent !important; }
.mapmark div { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.mapmark div.np { background: rgba(255,255,255,.7) !important; border: 2px dashed #5f6b76; box-shadow: none; }
.maplabel { position: absolute; left: 26px; top: 1px; font: 600 11px/1 sans-serif;
  color: #17222c; background: rgba(255,255,255,.85); padding: 2px 4px; border-radius: 3px; white-space: nowrap; }

/* Списък с пострадали */
.vlist { max-height: 520px; overflow: auto; }
table.vlist-t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.vlist-t th { position: sticky; top: 0; background: #eef1f5; z-index: 1;
  padding: 6px 8px; text-align: left; font-size: 12px; text-transform: uppercase;
  color: var(--ink-2); border-bottom: 1px solid var(--line); cursor: pointer; user-select: none; }
table.vlist-t td { padding: 6px 8px; border-bottom: 1px solid #eceff3; vertical-align: top; }
table.vlist-t tr.sel td { background: #e6f0f7; }
table.vlist-t tr { cursor: pointer; }
table.vlist-t tr:hover td { background: #f5f8fa; }
.why { color: var(--ink-2); font-size: 12.5px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.filters button { padding: 4px 9px; font-size: 12.5px; border-radius: 12px; }
.filters button.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Панел на избрания пострадал */
.catbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.catbtns button { padding: 14px 8px; font-size: 15px; font-weight: 700; color: #fff; border: none;
  border-radius: var(--r); }
.catbtns button.c-GREEN  { background: var(--green); }
.catbtns button.c-YELLOW { background: var(--yellow); }
.catbtns button.c-RED    { background: var(--red); }
.catbtns button.c-BLACK  { background: var(--black); }
/* Пети избор — отделен от триажните категории: цял ред, светъл, пунктирен. */
.catbtns button.c-NOT_PERSON { grid-column: 1 / -1; background: #fff; color: #4a5561;
  border: 2px dashed #8a949e; padding: 10px 8px; font-size: 14px; }
.catbtns button.picked { outline: 4px solid #2b6f9e; outline-offset: 1px; }
.catbtns button[disabled] { filter: grayscale(.7); }
.featt { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; }
.featt th, .featt td { padding: 4px 6px; border-bottom: 1px solid #eceff3; text-align: left; }
.featt .yes { color: var(--green); font-weight: 700; }
.featt .no  { color: var(--ink-2); }
.explain { background: #f7f9fb; border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r); padding: 9px 11px; font-size: 13.5px; }
.switch { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 13.5px; color: var(--ink); }
.switch input { width: auto; margin: 0; }

/* ── Калибриране ────────────────────────────────────────────────────────── */
.framebox { position: relative; overflow: auto; max-height: 68vh; border: 1px solid var(--line);
  border-radius: var(--r); background: #2a3038; }
.framebox img { display: block; max-width: none; }
.gcpdot { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-radius: 50%; border: 2px solid #fff; background: rgba(240,140,20,.9);
  color: #17222c; font: 700 12px/20px sans-serif; text-align: center;
  box-shadow: 0 1px 5px rgba(0,0,0,.5); cursor: pointer; }
.gcpdot.new { background: rgba(90,169,230,.95); }
.zoombar { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }

/* ── Отчет ──────────────────────────────────────────────────────────────── */
.cols2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
table.cm { border-collapse: collapse; font-size: 13px; }
table.cm th, table.cm td { border: 1px solid var(--line); padding: 6px 10px; text-align: center; min-width: 62px; }
table.cm th { background: #eef1f5; font-weight: 600; }
table.cm td.diag { font-weight: 700; }
.kappa { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kappa small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-2); }

/* ── Таблет ─────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .cc { grid-template-columns: 1fr 1fr; }
  .cc .zone-panel { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .cc { grid-template-columns: 1fr; }
  .topbar { height: auto; flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  #map, #svgmap { height: 340px; }
  main.wrap { padding: 14px 10px 24px; }
  table.grid { font-size: 13px; }
  .acts a { display: block; margin: 2px 0; }
}

/* На малък екран знакът в лентата само отнема място — остава само на екрана
   за вход. Прагът е 900 px, за да хване и телефон в хоризонтално положение
   (там ширината е около 850 px).
   Заявката е само за ЕКРАН: A4 при печат е около 794 px и иначе би паднала
   тук, а разпечатката трябва да носи знака. */
@media screen and (max-width: 900px) {
  .brand img { display: none; }
}

/* Едри цели за пръст на таблет */
@media (pointer: coarse) {
  .catbtns button { padding: 18px 8px; font-size: 16px; }
  table.vlist-t td { padding: 9px 8px; }
}

@media print {
  .filters, .btn, button { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; }
  /* Отпечатаният отчет носи знака в главата си — той често се прилага към
     документация. Останалото от лентата отпада. */
  .topbar { background: none; color: #000; height: auto; padding: 0 0 8px;
    box-shadow: none; border-bottom: 1px solid #bbb; }
  .topbar .crumbs, .topbar .who, .topbar .btn-plain, .topbar .spacer { display: none !important; }
  .brand, .brand span { color: #000; }
  /* display: block изрично — правилото за тесен екран по-горе го скрива, а
     при тясна хартия то също би сработило. Разпечатката винаги носи знака. */
  .brand img { display: block; height: 34px; padding: 0; background: none; box-shadow: none; }
}