/* ОТ-аудит — дизайн-система «инструментальная панель».
   Сигнатура: уровень риска как сквозной визуальный код. */

:root {
  --canvas:#EEF1F4; --surface:#FFFFFF; --surface-2:#F7F9FB;
  --ink:#171A1F; --ink-2:#5B6570; --ink-3:#8A929C;
  --panel:#171C24; --panel-2:#1F2732; --panel-ink:#AEB7C2; --panel-ink-2:#727C88;
  --primary:#2E5BE6; --primary-ink:#1E48C8; --primary-wash:#EAF0FE;
  --line:#DCE1E8; --line-2:#E9EDF2;
  --risk-low:#1F9D6B; --risk-low-wash:#E5F5EE;
  --risk-mid:#E0930A; --risk-mid-wash:#FBF0DC;
  --risk-high:#D93A3A; --risk-high-wash:#FBE7E7;
  --ok:#1F9D6B; --danger:#D93A3A;
  --r:4px; --r-lg:8px;
  --shadow:0 1px 2px rgba(23,26,31,.04), 0 2px 8px rgba(23,26,31,.05);
  --sidebar-w:236px;
  --sans:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono","SF Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--canvas);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.01em; line-height:1.2}
h1{font-size:22px} h2{font-size:16px; letter-spacing:0} h3{font-size:13.5px}
p{margin:.4rem 0}
.muted{color:var(--ink-2)} .mono{font-family:var(--mono); font-feature-settings:"tnum"}

/* ---------- оболочка ---------- */
.app{display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh}
.sidebar{
  background:var(--panel); color:var(--panel-ink); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{
  display:flex; align-items:center; gap:10px; padding:18px 20px 16px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.brand .mark{
  width:26px; height:26px; border-radius:5px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--primary),#5C7CF0);
  display:grid; place-items:center; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.brand .mark svg{width:15px; height:15px}
.brand b{color:#fff; font-size:14.5px; letter-spacing:.02em}
.brand small{display:block; color:var(--panel-ink-2); font-size:11px; letter-spacing:.08em; text-transform:uppercase}
.nav{padding:12px 12px 20px; display:flex; flex-direction:column; gap:1px}
.nav .grp{color:var(--panel-ink-2); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; padding:16px 12px 6px}
.nav a{
  display:flex; align-items:center; gap:11px; padding:8px 12px; border-radius:var(--r);
  color:var(--panel-ink); font-size:13.5px; font-weight:500;
}
.nav a:hover{background:var(--panel-2); color:#fff; text-decoration:none}
.nav a.active{background:var(--panel-2); color:#fff}
.nav a.active svg{color:#7E9BF5}
.nav svg{width:17px; height:17px; flex:0 0 auto; color:var(--panel-ink-2); stroke-width:1.8}
.sidebar .foot{margin-top:auto; padding:14px 16px; border-top:1px solid rgba(255,255,255,.07); font-size:11.5px; color:var(--panel-ink-2)}

.main{display:flex; flex-direction:column; min-width:0}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 28px; height:60px; background:rgba(255,255,255,.85); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5;
}
.topbar .crumb{display:flex; align-items:center; gap:8px; min-width:0}
.topbar .crumb .sep{color:var(--ink-3)}
.topbar h1{font-size:17px}
.who{display:flex; align-items:center; gap:12px; font-size:13px; color:var(--ink-2)}
.who .avatar{width:28px; height:28px; border-radius:50%; background:var(--primary-wash); color:var(--primary-ink);
  display:grid; place-items:center; font-weight:600; font-size:12px; font-family:var(--mono)}
.role{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.content{padding:28px 34px; max-width:1600px; width:100%}
/* свёрнутое меню (десктоп): прячем сайдбар, контент на всю ширину */
.app.nav-collapsed{grid-template-columns:1fr}
.app.nav-collapsed .sidebar{display:none}

/* ---------- карточки/панели ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow)}
.card>.hd{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line-2)}
.card>.hd .sub{font-size:12px; color:var(--ink-2); margin-top:2px}
.card>.bd{padding:20px}
.card.pad{padding:20px}
.grid{display:grid; gap:18px}
.grid.k3{grid-template-columns:repeat(3,1fr)}
.grid.k2{grid-template-columns:repeat(2,1fr)}
.section-title{display:flex; align-items:center; gap:10px; margin:26px 0 12px}
.section-title h2{font-size:14px; letter-spacing:.02em}
.section-title .rule{flex:1; height:1px; background:var(--line)}

/* ---------- метрики ---------- */
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--shadow)}
.stat .k{font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.stat .v{font-family:var(--mono); font-size:30px; font-weight:500; letter-spacing:-.02em; margin-top:6px; line-height:1}
.stat .v .u{font-size:13px; color:var(--ink-3); margin-left:6px; letter-spacing:0}
.stat .edge{height:3px; border-radius:3px; margin-top:14px; background:var(--line)}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; gap:7px; font:inherit; font-weight:500; font-size:13.5px;
  padding:8px 14px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface);
  color:var(--ink); cursor:pointer; transition:background .12s,border-color .12s,box-shadow .12s; text-decoration:none;
}
.btn:hover{background:var(--surface-2); border-color:#CDD4DD; text-decoration:none}
.btn svg{width:16px; height:16px; stroke-width:1.9}
.btn-primary{background:var(--primary); border-color:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-ink); border-color:var(--primary-ink)}
.btn-danger{color:var(--danger); border-color:#EFC9C9}
.btn-danger:hover{background:var(--risk-high-wash); border-color:#E4A9A9}
.btn-sm{padding:5px 10px; font-size:12.5px}
.btn-ghost{border-color:transparent; background:transparent}
.btn-ghost:hover{background:var(--surface-2); border-color:var(--line)}

/* ---------- формы ---------- */
.field{margin:0 0 14px; display:block}
.field>span{display:block; font-size:12.5px; font-weight:500; color:var(--ink-2); margin-bottom:5px}
input,select,textarea{
  font:inherit; width:100%; padding:8px 11px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); color:var(--ink); transition:border-color .12s, box-shadow .12s;
}
textarea{font-family:var(--mono); font-size:12.5px; line-height:1.55; resize:vertical}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-wash)}
.form-row{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end}
.form-row .field{flex:1; min-width:160px; margin-bottom:0}
.hint{font-size:12px; color:var(--ink-3); margin-top:6px; line-height:1.5}
.inline{display:inline-flex; align-items:center; gap:6px}

/* ---------- таблицы ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface)}
table.tbl{border-collapse:collapse; width:100%; font-size:13px}
.tbl thead th{
  text-align:left; font-weight:600; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-3); padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface-2); white-space:nowrap;
}
.tbl tbody td{padding:11px 14px; border-bottom:1px solid var(--line-2); vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl .num{font-family:var(--mono); color:var(--ink-2); font-size:12.5px}
.tbl .empty{color:var(--ink-3); text-align:center; padding:26px}
.tbl a{font-weight:500}
/* сигнатура: цветной торец строки по уровню риска */
.tbl tr.rk-low td:first-child{box-shadow:inset 3px 0 0 var(--risk-low)}
.tbl tr.rk-mid td:first-child{box-shadow:inset 3px 0 0 var(--risk-mid)}
.tbl tr.rk-high td:first-child{box-shadow:inset 3px 0 0 var(--risk-high)}
.tbl tr.grp td{background:var(--surface-2); border-top:2px solid var(--line); padding-top:9px; padding-bottom:7px}
.tbl tr.grp{cursor:pointer; user-select:none}
.tbl tr.grp:hover td{background:var(--surface)}
.tbl tr.grp .caret{display:inline-block; width:12px; color:var(--ink-3); transition:transform .12s ease; font-size:11px}
.tbl tr.grp.open .caret{transform:rotate(90deg)}

/* ---------- чипы: статус и риск ---------- */
.chip{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 9px;
  border-radius:100px; letter-spacing:.01em; white-space:nowrap; border:1px solid transparent}
.chip::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9}
.risk-low{color:var(--risk-low); background:var(--risk-low-wash)}
.risk-mid{color:var(--risk-mid); background:var(--risk-mid-wash)}
.risk-high{color:var(--risk-high); background:var(--risk-high-wash)}
.st-draft{color:var(--ink-2); background:var(--surface-2); border-color:var(--line)}
.st-review{color:var(--primary-ink); background:var(--primary-wash)}
.st-approved{color:var(--risk-low); background:var(--risk-low-wash)}
.chip.plain::before{display:none}
.chip.mono{font-family:var(--mono); font-weight:500}

/* ---------- матрица-глиф (сигнатура в шапке оценки) ---------- */
.mtx{display:inline-grid; grid-template-columns:repeat(3,7px); grid-auto-rows:7px; gap:2px}
.mtx i{border-radius:1px; background:var(--line)}
.mtx i.l{background:var(--risk-low)} .mtx i.m{background:var(--risk-mid)} .mtx i.h{background:var(--risk-high)}

/* ---------- логин ---------- */
.auth{min-height:100vh; display:grid; place-items:center; background:
  radial-gradient(1200px 500px at 50% -10%, #E7ECF4 0%, var(--canvas) 60%)}
.auth .box{width:360px; max-width:calc(100vw - 40px)}
.auth .brand-lg{display:flex; align-items:center; gap:12px; margin-bottom:22px; justify-content:center}
.auth .brand-lg .mark{width:34px; height:34px; border-radius:7px; background:linear-gradient(135deg,var(--primary),#5C7CF0); display:grid; place-items:center}
.auth .brand-lg .mark svg{width:19px;height:19px}
.auth .brand-lg b{font-size:18px; letter-spacing:.01em}
.err{background:var(--risk-high-wash); color:#A32525; border:1px solid #EFC9C9; padding:9px 12px; border-radius:var(--r); font-size:13px; margin-bottom:14px}

.stack>*+*{margin-top:12px}
.row-between{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.toolbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

/* ---------- адаптив ---------- */
@media (max-width:860px){
  :root{--sidebar-w:0px}
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed; left:0; top:0; width:236px; z-index:20; transform:translateX(-100%); transition:transform .2s}
  .sidebar.open{transform:none}
  .content{padding:18px}
  .grid.k3,.grid.k2{grid-template-columns:1fr}
  .burger{display:inline-grid!important}
}
.burger{display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); cursor:pointer; color:var(--ink-2); flex:none}
.burger:hover{background:var(--surface-2); color:var(--ink)}
/* серверный typeahead (window.remoteAC) */
.ac-pop{position:absolute; left:0; right:0; top:100%; z-index:50; margin-top:3px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); max-height:260px; overflow:auto}
.ac-pop .ac-item{padding:7px 11px; font-size:13px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ac-pop .ac-item.on,.ac-pop .ac-item:hover{background:var(--primary-wash); color:var(--primary-ink)}
.burger svg{width:18px;height:18px}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
:focus-visible{outline:2px solid var(--primary); outline-offset:2px}