/* ==========================================================================
   Закупочная экспертиза — дизайн-система.
   Палитра и типографика по стандарту «Фирменный стиль»
   ПАО «ГМК «Норильский никель», версия 1.1 (стр. 35–36).
   ========================================================================== */

:root {
  /* Основные фирменные цвета */
  --nn-blue:        #0077C8;   /* Pantone 3005        */
  --nn-gray:        #626262;   /* Pantone Cool Gray 10 */
  --nn-gray-light:  #C8C8C8;   /* Pantone Cool Gray 3  */
  --nn-blue-dark:   #004C97;   /* Pantone 2945         */
  --nn-violet:      #654EA3;   /* Pantone 2096         */
  --nn-teal:        #009CA6;   /* Pantone 320          */
  --nn-copper:      #D38235;   /* Pantone 7412         */

  /* Нейтральная шкала: n-600 и n-300 — фирменные серые, остальное выведено */
  --n-0:#FFFFFF; --n-25:#FAFBFC; --n-50:#F4F6F8; --n-100:#EDF0F2;
  --n-150:#E4E8EB; --n-200:#DADEE2; --n-300:#C8C8C8; --n-400:#9AA0A6;
  --n-500:#7A8085; --n-600:#626262; --n-700:#46494C; --n-800:#2E3134; --n-900:#1C1F22;

  --blue-04: rgba(0,119,200,.045);
  --blue-08: rgba(0,119,200,.085);
  --blue-14: rgba(0,119,200,.14);

  /* Статусы: три из четырёх — фирменные цвета */
  --ok:#009CA6;   --ok-bg:#E5F5F6;   --ok-br:#B3E1E4;   --ok-dk:#04737B;
  --warn:#D38235; --warn-bg:#FBF0E5; --warn-br:#F0D3B4; --warn-dk:#96591B;
  --bad:#C0392B;  --bad-bg:#FBEAE8;  --bad-br:#EFC5BF;
  --info:#0077C8; --info-bg:#E5F1F9; --info-br:#B3D6EC;
  --idle:#7A8085; --idle-bg:#F0F2F4; --idle-br:#DADEE2;

  /* Фирменная гарнитура — Proxima Nova; на машинах Компании подхватится первой */
  --font:"Proxima Nova","ProximaNova","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Mono",Menlo,Consolas,monospace;

  --r-xs:3px; --r-sm:5px; --r-md:8px; --r-lg:12px;
  --sh-sm:0 1px 2px rgba(28,31,34,.06), 0 1px 1px rgba(28,31,34,.04);
  --sh-md:0 4px 16px rgba(28,31,34,.09), 0 1px 3px rgba(28,31,34,.05);
  --sh-lg:0 14px 40px rgba(28,31,34,.16), 0 2px 8px rgba(28,31,34,.07);

  --sb-w:236px; --hd-h:56px;
}

*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:var(--font); color:var(--n-800); background:var(--n-50);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-size:14px; line-height:1.45;
}
a{color:inherit;} button,input,select,textarea{font-family:inherit;font-size:inherit;}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.012em;color:var(--n-900);}

*{scrollbar-width:thin;scrollbar-color:var(--n-300) transparent;}
*::-webkit-scrollbar{width:9px;height:9px;}
*::-webkit-scrollbar-thumb{background:var(--n-300);border-radius:9px;border:2px solid transparent;background-clip:content-box;}
*::-webkit-scrollbar-thumb:hover{background:var(--n-400);background-clip:content-box;}
*::-webkit-scrollbar-track{background:transparent;}

.nn-mark{display:block;flex:0 0 auto;}

/* ==========================================================================
   Оболочка приложения
   ========================================================================== */
/* Обёртка оболочки не должна создавать бокс: её дети — .sb и .hd —
   участвуют в гриде страницы напрямую. */
#shell{display:contents;}

body.app{
  display:grid;
  grid-template-columns:var(--sb-w) 1fr;
  grid-template-rows:var(--hd-h) 1fr;
  height:100vh; overflow:hidden;
}

/* ---------- Боковая панель ---------- */
.sb{
  grid-row:1 / -1; grid-column:1;
  background:var(--n-900); color:#fff;
  display:flex; flex-direction:column; min-height:0;
}
.sb-brand{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  padding:0 16px; height:var(--hd-h); flex:0 0 auto;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sb-brand-t{display:flex;flex-direction:column;line-height:1.2;min-width:0;}
.sb-brand-t b{font-size:14px;font-weight:700;color:#fff;letter-spacing:-.01em;}
.sb-brand-t em{font-style:normal;font-size:11px;color:rgba(255,255,255,.5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-nav{flex:1;overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:2px;min-height:0;}
.nv{
  display:flex; align-items:center; gap:11px; text-decoration:none;
  padding:9px 11px; border-radius:var(--r-sm);
  color:rgba(255,255,255,.68); font-size:13.5px; font-weight:500;
  transition:background .12s,color .12s;
}
.nv svg{width:17px;height:17px;flex:0 0 auto;opacity:.9;}
.nv-t{flex:1;}
.nv-n{font-size:11px;font-weight:600;background:rgba(255,255,255,.12);
  border-radius:999px;padding:2px 7px;line-height:1.3;}
.nv:hover{background:rgba(255,255,255,.07);color:#fff;}
.nv.on{background:var(--nn-blue);color:#fff;}
.nv.on .nv-n{background:rgba(255,255,255,.24);}
.sb-foot{
  flex:0 0 auto; padding:12px 12px 14px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; gap:8px;
}
.sb-user{display:flex;align-items:center;gap:9px;flex:1;min-width:0;}
.sb-user-t{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.sb-user-t b{font-size:12.5px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-user-t em{font-style:normal;font-size:11px;color:rgba(255,255,255,.45);}
.ava{
  width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  background:var(--nn-blue);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;
}
.sb-out{
  width:30px;height:30px;border-radius:var(--r-sm);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.5);text-decoration:none;transition:background .12s,color .12s;
}
.sb-out:hover{background:rgba(255,255,255,.1);color:#fff;}
.sb-out svg{width:16px;height:16px;}

/* ---------- Верхняя строка ---------- */
.hd{
  grid-column:2; grid-row:1;
  display:flex; align-items:center; gap:10px; padding:0 18px 0 22px;
  background:var(--n-0); border-bottom:1px solid var(--n-150);
  position:relative; z-index:20;
}
.hd-crumbs{display:flex;align-items:center;gap:7px;font-size:13px;min-width:0;}
.cb{color:var(--n-500);text-decoration:none;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:340px;}
a.cb:hover{color:var(--nn-blue);}
.cb-now{color:var(--n-900);font-weight:600;}
.cb-sep{color:var(--n-300);}
.hd-sp{flex:1;}
.hd-search{
  display:flex;align-items:center;gap:8px;flex:0 1 320px;
  border:1px solid var(--n-200);border-radius:var(--r-sm);
  padding:0 9px;height:34px;background:var(--n-25);
  transition:border-color .12s,background .12s;
}
.hd-search:focus-within{border-color:var(--nn-blue);background:var(--n-0);}
.hd-search svg{width:14px;height:14px;color:var(--n-400);flex:0 0 auto;}
.hd-search input{flex:1;border:0;background:none;outline:none;font-size:13px;color:var(--n-800);min-width:0;}
.hd-search input::placeholder{color:var(--n-400);}
.hd-search kbd{
  font-family:var(--font);font-size:10.5px;color:var(--n-400);
  border:1px solid var(--n-200);border-radius:3px;padding:1px 5px;background:var(--n-0);
}
.hd-ic{
  width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--n-200);
  background:var(--n-0);color:var(--n-600);cursor:pointer;position:relative;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.hd-ic:hover{background:var(--n-50);}
.hd-ic svg{width:16px;height:16px;}
.hd-dot{position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%;
  background:var(--bad);border:1.5px solid var(--n-0);}
.pop{
  position:absolute;top:calc(100% + 7px);right:18px;width:352px;
  background:var(--n-0);border:1px solid var(--n-200);border-radius:var(--r-md);
  box-shadow:var(--sh-lg);overflow:hidden;display:none;z-index:40;
}
.pop.open{display:block;}
.pop-h{padding:12px 15px;border-bottom:1px solid var(--n-150);font-size:12.5px;
  font-weight:600;color:var(--n-900);display:flex;align-items:center;gap:8px;}
.pop-n{font-size:11px;font-weight:700;background:var(--bad);color:#fff;
  border-radius:999px;padding:1px 6px;}
.pn{display:block;padding:11px 15px;border-bottom:1px solid var(--n-100);text-decoration:none;}
.pn:last-child{border-bottom:0;}
.pn:hover{background:var(--n-25);}
.pn.unread{background:var(--blue-04);}
.pn.unread:hover{background:var(--blue-08);}
.pn-t{font-size:12.5px;font-weight:600;color:var(--n-900);line-height:1.4;}
.pn-s{font-size:12px;color:var(--n-600);margin-top:2px;line-height:1.45;}
.pn-w{font-size:11px;color:var(--n-400);margin-top:4px;}

main{grid-column:2;grid-row:2;overflow:auto;min-height:0;min-width:0;}
main.flat{overflow:hidden;display:flex;flex-direction:column;}

/* ==========================================================================
   Общие элементы
   ========================================================================== */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  line-height:1;padding:4px 8px;border-radius:999px;white-space:nowrap;border:1px solid transparent;}
.badge-ok{color:var(--ok-dk);background:var(--ok-bg);border-color:var(--ok-br);}
.badge-warn{color:var(--warn-dk);background:var(--warn-bg);border-color:var(--warn-br);}
.badge-bad{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-br);}
.badge-info{color:var(--nn-blue-dark);background:var(--info-bg);border-color:var(--info-br);}
.badge-idle{color:var(--idle);background:var(--idle-bg);border-color:var(--idle-br);}

.dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;display:inline-block;}
.dot-ok{background:var(--ok);} .dot-warn{background:var(--warn);}
.dot-bad{background:var(--bad);} .dot-info{background:var(--info);}
.dot-idle{background:var(--n-300);} .dot-run{background:var(--nn-blue);}

.sq{width:8px;height:8px;border-radius:2px;flex:0 0 auto;display:inline-block;}
.sq-ok{background:var(--ok);} .sq-warn{background:var(--warn);}
.sq-bad{background:var(--bad);} .sq-check{background:var(--n-400);}
.sq-idle{background:var(--n-300);} .sq-run{background:var(--nn-blue);}

.btn{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-size:13px;font-weight:500;line-height:1;padding:8px 14px;border-radius:var(--r-sm);
  border:1px solid var(--n-200);background:var(--n-0);color:var(--n-700);
  transition:background .12s,border-color .12s,color .12s;white-space:nowrap;
}
.btn:hover{background:var(--n-50);border-color:var(--n-300);}
.btn svg{width:14px;height:14px;flex:0 0 auto;}
.btn-primary{background:var(--nn-blue);border-color:var(--nn-blue);color:#fff;}
.btn-primary:hover{background:var(--nn-blue-dark);border-color:var(--nn-blue-dark);color:#fff;}
.btn-sm{padding:6px 11px;font-size:12.5px;}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn:disabled:hover{background:var(--n-0);border-color:var(--n-200);}

.card{background:var(--n-0);border:1px solid var(--n-200);border-radius:var(--r-md);}
.kicker{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--n-400);}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.muted{color:var(--n-500);}

/* Пустое состояние */
.empty{padding:44px 26px;text-align:center;color:var(--n-400);font-size:12.5px;line-height:1.6;}
.empty svg{width:26px;height:26px;margin-bottom:10px;opacity:.5;}