/* ============================================================
   info.fulsystem.ru — дизайн-система панели
   Три темы: light | dark | neutral (усреднённая, приглушённый контраст).
   Анимации: микро-взаимодействия везде (120–200 мс), акцентные появления
   дозированно; при prefers-reduced-motion всё отключается.
   ============================================================ */

:root{
  --accent:#6152C9;            /* фирменный акцент FulSystem */
  --accent-2:#7A6CDB;
  --accent-soft:#EFEDFB;
  --ok:#1F9D55; --warn:#C9861F; --err:#C6392F; --idle:#98A2B3;

  --bg:#F4F7FB; --card:#FFFFFF; --line:#E3E8F0;
  --ink:#14181F; --ink-2:#33415C; --muted:#8A93A6;
  --shadow:0 1px 2px rgba(20,24,31,.04), 0 8px 24px rgba(20,24,31,.06);

  --r-s:8px; --r-m:12px; --r-l:16px;
  --t-fast:130ms; --t-mid:200ms; --t-slow:420ms;
  --ease:cubic-bezier(.22,.61,.36,1);
}

:root[data-theme="dark"]{
  --accent:#8A7BEA; --accent-2:#9C90F0; --accent-soft:#241F3D;
  --ok:#3FBF77; --warn:#E0A34A; --err:#E4685E; --idle:#6B7280;
  --bg:#0F1218; --card:#161B24; --line:#242C3A;
  --ink:#E9EDF5; --ink-2:#B4BECF; --muted:#7C8798;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
}

:root[data-theme="neutral"]{           /* усреднённая: мягкий контраст, тёплый серый */
  --accent:#6A5EB8; --accent-2:#7E73C6; --accent-soft:#E8E6F2;
  --ok:#2E8B5A; --warn:#B5893A; --err:#B5544B; --idle:#9AA0AA;
  --bg:#E9E7E2; --card:#F6F5F2; --line:#D7D3CB;
  --ink:#26282C; --ink-2:#4A4F57; --muted:#7E8288;
  --shadow:0 1px 2px rgba(38,40,44,.05), 0 6px 18px rgba(38,40,44,.07);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.55 "Golos Text","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  transition:background var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
}

/* ── шапка ─────────────────────────────────────────────── */
.top{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 24px; background:var(--card);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit}
.logo{
  width:30px; height:30px; border-radius:9px; background:var(--accent);
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:15px;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.brand:hover .logo{transform:translateY(-1px) scale(1.04); box-shadow:0 4px 14px rgba(97,82,201,.35)}
.brand b{font-size:15px; font-weight:650}
.brand span{display:block; font-size:12px; color:var(--muted)}

nav{display:flex; gap:4px; flex-wrap:wrap; margin-left:12px}
nav a{
  position:relative; padding:7px 12px; border-radius:var(--r-s);
  color:var(--ink-2); text-decoration:none; font-size:14px;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
nav a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:3px; height:2px;
  background:var(--accent); border-radius:2px; transform:scaleX(0);
  transform-origin:left; transition:transform var(--t-mid) var(--ease);
}
nav a:hover{background:var(--accent-soft); color:var(--accent)}
nav a:hover::after{transform:scaleX(1)}
nav a.on{background:var(--accent-soft); color:var(--accent); font-weight:600}
nav a.on::after{transform:scaleX(1)}

.head-right{margin-left:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.themes{display:flex; gap:4px; background:var(--bg);
        border:1px solid var(--line); border-radius:10px; padding:3px}
.themes a{
  width:30px; height:26px; border-radius:7px; display:grid; place-items:center;
  text-decoration:none; font-size:13px; color:var(--muted);
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.themes a:hover{background:var(--accent-soft); transform:translateY(-1px)}
.themes a.on{background:var(--accent); color:#fff}

/* ── кто вошёл ──────────────────────────────────────────── */
.who{display:flex; align-items:center; gap:8px}
.who-link{display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit;
          padding:4px 8px 4px 4px; border-radius:22px;
          transition:background var(--t-fast) var(--ease)}
.who-link:hover{background:var(--accent-soft)}
.ava{width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff;
     display:grid; place-items:center; font-weight:700; font-size:13px; flex:none}
.who-txt b{display:block; font-size:13px; font-weight:600; line-height:1.25}
.who-txt > span{display:block; font-size:11px; color:var(--muted); line-height:1.2}

/* ── меню на телефоне: чекбокс вместо JS ────────────────── */
.navtog{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.burger{display:none; width:42px; height:38px; border:1px solid var(--line);
        border-radius:var(--r-s); background:var(--bg); cursor:pointer;
        place-items:center; transition:background var(--t-fast) var(--ease)}
.burger span, .burger span::before, .burger span::after{
  display:block; width:18px; height:2px; background:var(--ink-2); border-radius:2px;
  transition:transform var(--t-mid) var(--ease), opacity var(--t-fast) var(--ease)}
.burger span::before{content:""; transform:translateY(-6px)}
.burger span::after{content:""; transform:translateY(4px)}
.burger:hover{background:var(--accent-soft)}
.navtog:focus-visible + .burger{outline:2px solid var(--accent); outline-offset:2px}
.navtog:checked + .burger span{transform:rotate(45deg)}
.navtog:checked + .burger span::before{opacity:0}
.navtog:checked + .burger span::after{transform:rotate(-90deg) translateX(0)}

/* ── карточки и сетка ──────────────────────────────────── */
.wrap{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; padding:18px 24px; align-items:start}
/* Страховка от «раздувания» сетки: содержимое шире колонки скроллится внутри
   своего контейнера, а не тянет за собой страницу. */
.wrap > *{min-width:0}
.card{min-width:0}
.map-shell{max-width:100%}
@media (max-width:1100px){.wrap{grid-template-columns:1fr}}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-l);
  padding:18px 20px; box-shadow:var(--shadow);
  animation:rise var(--t-slow) var(--ease) both;      /* акцент 1: появление карточки */
}
.card + .card{margin-top:16px}
.card h2{margin:0 0 3px; font-size:15px; font-weight:650}
.card .hint{color:var(--muted); font-size:13px; margin-bottom:12px}

@keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* ── кнопки ────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--accent); color:#fff; border:0; border-radius:var(--r-s);
  padding:9px 15px; font:600 13.5px/1 inherit; cursor:pointer;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease);
}
.btn:hover{background:var(--accent-2); transform:translateY(-1px);
           box-shadow:0 6px 18px rgba(97,82,201,.30)}
.btn:active{transform:translateY(0) scale(.985); box-shadow:none}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn.ghost{background:transparent; color:var(--accent); border:1.5px solid var(--accent)}
.btn.ghost:hover{background:var(--accent-soft); box-shadow:none}
.btn.sm{padding:6px 11px; font-size:12.5px}

/* ── карта процесса ────────────────────────────────────── */
.map-shell{overflow:auto; border:1px solid var(--line); border-radius:var(--r-m); background:var(--bg)}
svg.map{display:block; min-width:1280px}
.n-box{
  fill:var(--card); stroke:var(--line); stroke-width:1.5;
  transition:stroke var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
.node{cursor:pointer}
.node:hover .n-box{stroke:var(--accent); filter:drop-shadow(0 6px 14px rgba(97,82,201,.22))}
.node.sel .n-box{stroke:var(--accent); stroke-width:2.5}
.node.off .n-box{stroke-dasharray:5 4}
.node.off .n-title{opacity:.55}
.n-title{font:600 13px inherit; fill:var(--ink)}
.n-meta{font:500 11px inherit; fill:var(--muted)}
.n-badge{font:700 10.5px inherit; fill:#fff}
.edge{stroke:var(--line); stroke-width:1.8; fill:none; marker-end:url(#arrow)}
.edge.hot{stroke:var(--accent); stroke-width:2.2}
.zone{fill:none; stroke:var(--line); stroke-dasharray:6 5}
.zone-label{font:600 11.5px inherit; fill:var(--muted); letter-spacing:.05em}

/* пульс у узла, требующего человека — акцент 2, только при наличии состояния */
.pulse{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.45}}

/* ── боковая панель узла ───────────────────────────────── */
.row{display:flex; justify-content:space-between; gap:10px; padding:8px 0;
     border-bottom:1px dashed var(--line); font-size:13.5px}
.row:last-child{border-bottom:0}
.row span{color:var(--ink-2)} .row b{font-weight:650}
.tag{display:inline-block; font:600 11px inherit; padding:3px 8px; border-radius:20px;
     background:var(--accent-soft); color:var(--accent); margin:0 4px 4px 0;
     transition:transform var(--t-fast) var(--ease)}
.tag:hover{transform:translateY(-1px)}
.tag.grey{background:var(--bg); color:var(--muted); border:1px solid var(--line)}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-2); margin-bottom:10px}
.dot{width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:6px}

.note{background:var(--accent-soft); border:1px solid var(--line); border-radius:var(--r-m);
      padding:12px 14px; font-size:13.5px; color:var(--ink-2)}
.kpi{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px}
.kpi div{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-m);
         padding:11px 13px; transition:transform var(--t-fast) var(--ease)}
.kpi div:hover{transform:translateY(-2px)}
.kpi b{display:block; font-size:20px; font-weight:700; line-height:1.2}
.kpi small{color:var(--muted); font-size:12px}

footer{padding:6px 24px 24px; color:var(--muted); font-size:12.5px}

/* ── таблицы ───────────────────────────────────────────── */
.tbl{width:100%; border-collapse:collapse; font-size:13.5px}
.tbl th{text-align:left; font-weight:600; color:var(--muted); font-size:12px;
        text-transform:uppercase; letter-spacing:.04em; padding:8px 10px 8px 0;
        border-bottom:1px solid var(--line)}
.tbl td{padding:10px 10px 10px 0; border-bottom:1px solid var(--line); vertical-align:top}
.tbl tr{transition:background var(--t-fast) var(--ease)}
.tbl tbody tr:hover{background:var(--accent-soft)}
.tbl a{color:var(--accent); text-decoration:none}
.tbl a:hover{text-decoration:underline}
.muted{color:var(--muted)}

/* ── плашки статусов ───────────────────────────────────── */
.pill{display:inline-block; font:600 11px inherit; padding:3px 9px; border-radius:20px;
      background:var(--bg); color:var(--ink-2); border:1px solid var(--line); white-space:nowrap}
.pill-ok,.pill-confirmed,.pill-published,.pill-approved,.pill-done,.pill-free{
      background:rgba(31,157,85,.12); color:var(--ok); border-color:transparent}
.pill-warn,.pill-pending,.pill-variants,.pill-review,.pill-taken,.pill-retry_wait,.pill-skip{
      background:rgba(201,134,31,.14); color:var(--warn); border-color:transparent}
.pill-err,.pill-error,.pill-failed,.pill-manual_check,.pill-sent_unconfirmed,.pill-rejected{
      background:rgba(198,57,47,.13); color:var(--err); border-color:transparent}
.pill-unknown,.pill-cancelled,.pill-new{background:var(--bg); color:var(--muted)}

/* ── блоки согласования ────────────────────────────────── */
.block{border:1px solid var(--line); border-radius:var(--r-m); padding:14px 16px; margin-bottom:14px}
.block-head{display:flex; justify-content:space-between; gap:12px; align-items:baseline;
            margin-bottom:10px; flex-wrap:wrap}
.variant{border-top:1px dashed var(--line); padding:11px 0}
.variant-head{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:7px}
textarea{width:100%; background:var(--bg); color:var(--ink); border:1px solid var(--line);
         border-radius:var(--r-s); padding:9px 11px; font:14px/1.5 inherit; resize:vertical;
         transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease)}
textarea:focus{outline:none; border-color:var(--accent);
               box-shadow:0 0 0 3px rgba(97,82,201,.14)}
code{background:var(--bg); border:1px solid var(--line); border-radius:5px;
     padding:1px 6px; font-size:12.5px}

/* ── flash-сообщения ───────────────────────────────────── */
.flash{margin:12px 24px 0; padding:11px 15px; border-radius:var(--r-m); font-size:14px;
       border:1px solid var(--line); background:var(--card);
       animation:rise var(--t-mid) var(--ease) both}
.flash.ok{border-left:3px solid var(--ok)}
.flash.warn{border-left:3px solid var(--warn)}
.flash.err{border-left:3px solid var(--err)}
.flash.tight{margin:0 0 14px}

/* ── поля ввода и формы ────────────────────────────────── */
.fld{display:block; margin-bottom:13px}
.fld > span{display:block; font-size:12.5px; color:var(--ink-2); margin-bottom:5px; font-weight:500}
.fld input, .fld select{
  width:100%; background:var(--bg); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--r-s); padding:11px 12px; font:15px/1.4 inherit;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.fld input:focus, .fld select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(97,82,201,.14)}
.btn.wide{width:100%; justify-content:center; padding:12px 15px; font-size:14.5px}
.form-narrow{max-width:420px}
.inline-form{display:flex; gap:8px; flex-wrap:wrap}

/* ── экран входа ───────────────────────────────────────── */
.auth-body{min-height:100vh; display:grid; place-items:center;
           background:
             radial-gradient(1100px 520px at 50% -10%, var(--accent-soft), transparent 70%),
             var(--bg)}
.auth{width:100%; max-width:400px; padding:24px 18px; display:grid; gap:14px; justify-items:center}
.auth-card{width:100%; padding:24px 24px 20px}
.auth-brand{display:flex; align-items:center; gap:11px; margin-bottom:18px}
.auth-brand b{display:block; font-size:15px; font-weight:650}
.auth-brand span span, .auth-brand div span{display:block; font-size:12px; color:var(--muted)}
.auth-note{margin:14px 0 0; font-size:12.5px; color:var(--muted); line-height:1.5}
.auth-themes{display:flex; gap:4px; background:var(--card);
             border:1px solid var(--line); border-radius:10px; padding:3px}
.auth-themes a{width:34px; height:30px; border-radius:7px; display:grid; place-items:center;
               text-decoration:none; font-size:13px; color:var(--muted);
               transition:background var(--t-fast) var(--ease)}
.auth-themes a:hover{background:var(--accent-soft)}
.auth-themes a.on{background:var(--accent); color:#fff}

/* ── широкие таблицы: скроллятся внутри себя, а не страницей ── */
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tbl-wrap .tbl{min-width:520px}

/* ════════════ планшет ════════════ */
@media (max-width:1100px){
  /* именно minmax(0,1fr), а не 1fr: у «1fr» минимум равен min-content, и
     широкая карта процесса (min-width 1280px) растягивает колонку, из-за чего
     вбок едет вся страница вместо самой карты. */
  .wrap{grid-template-columns:minmax(0,1fr)}
}

/* ════════════ узкий планшет и телефон ════════════ */
@media (max-width:900px){
  .top{padding:10px 14px; gap:10px}
  .burger{display:grid; order:3}
  .head-right{order:2}
  nav{
    order:4; flex-basis:100%; margin-left:0;
    display:none; flex-direction:column; gap:2px;
    border-top:1px solid var(--line); padding-top:8px; margin-top:2px;
  }
  .navtog:checked ~ nav{display:flex; animation:drop var(--t-mid) var(--ease) both}
  nav a{padding:12px 12px; font-size:15px; border-radius:var(--r-s)}
  nav a::after{display:none}          /* подчёркивание из горизонтального меню */
  nav a.on{background:var(--accent-soft)}
  .wrap{padding:14px; gap:14px}
  .flash{margin:10px 14px 0}
  footer{padding:6px 14px 22px}
  .brand span span{display:none}      /* подпись под логотипом не нужна в узкой шапке */
}
@keyframes drop{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

/* ════════════ телефон ════════════ */
@media (max-width:640px){
  body{font-size:14.5px}
  .card{padding:15px 14px; border-radius:var(--r-m)}
  .card + .card{margin-top:12px}
  .who-txt{display:none}              /* остаётся кружок с буквой — экономим ширину */
  .who-link{padding:3px; border-radius:50%}
  .head-right{gap:8px}
  .kpi{grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:8px}
  .kpi b{font-size:18px}
  .tbl{font-size:13px}
  .tbl th{font-size:11px}
  .tbl th, .tbl td{padding:9px 8px 9px 0}
  .block{padding:12px 12px}
  .block-head{gap:6px}
  .legend{gap:10px; font-size:12px}
  .btn{padding:10px 14px}             /* палец: не меньше ~40px по высоте */
  .btn.sm{padding:8px 11px}
  .row{font-size:13px}
  .auth{padding:16px 14px}
  .auth-card{padding:20px 16px 16px}
  textarea{font-size:15px}            /* iOS не зумит поля от 16px, 15px+ безопасно */
  .fld input{font-size:16px}          /* именно 16px, иначе Safari приближает страницу */
}

/* ── доступность: полное отключение движения ───────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}