/* STL Sentinel — тъмна тема върху фирмената палитра */
:root{
  --blue:#5793e3; --green:#76d0ac; --navy:#28374c; --light:#DAE4EA;
  --bg:#141c27; --bg2:#1b2533; --panel:#202c3d; --line:#2e3d52;
  --txt:#e4ebf2; --mut:#8fa3bb;
  --crit:#e35757; --warn:#e3a957; --ok:#76d0ac;
  --r:8px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt);
  font-family:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:14px; line-height:1.5; font-weight:300;
}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-weight:800; margin:0 0 .6rem; letter-spacing:-.01em}
h1{font-size:1.5rem} h2{font-size:1.15rem} h3{font-size:1rem}
code,pre,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ---------- лента горе ---------- */
.topbar{
  display:flex; align-items:center; gap:1.2rem;
  background:var(--navy); border-bottom:1px solid var(--line);
  padding:0 1.2rem; height:56px; position:sticky; top:0; z-index:50;
}
.brand{display:flex; align-items:center; gap:.55rem; color:#fff; font-size:1.05rem; font-weight:300}
.brand:hover{text-decoration:none}
.brand b{font-weight:800}
.brand-mark{
  width:22px; height:22px; border-radius:6px; flex:none;
  background:linear-gradient(135deg,var(--blue),var(--green));
}
.brand-mark.big{width:44px;height:44px;border-radius:12px;margin:0 auto .6rem}
.mainnav{display:flex; gap:.15rem; flex:1; overflow-x:auto}
.mainnav a{
  color:var(--light); padding:.45rem .7rem; border-radius:var(--r);
  white-space:nowrap; position:relative; font-size:.92rem;
}
.mainnav a:hover{background:rgba(255,255,255,.07); text-decoration:none}
.mainnav a.active{background:var(--blue); color:#fff; font-weight:800}
.badge{
  display:inline-block; margin-left:.35rem; background:var(--crit); color:#fff;
  font-style:normal; font-size:.7rem; font-weight:800; padding:.05rem .33rem; border-radius:10px;
}
.userbox{display:flex; align-items:center; gap:.6rem; color:var(--light); font-size:.88rem}
.uname{opacity:.85}

/* ---------- оформление ---------- */
.wrap{max-width:1500px; margin:0 auto; padding:1.3rem}
.foot{text-align:center; color:var(--mut); font-size:.78rem; padding:1.5rem 0 2.5rem}
.row{display:flex; gap:1rem; flex-wrap:wrap}
.grid{display:grid; gap:1rem; grid-template-columns:1fr}
/* Децата трябва да могат да се свиват, иначе широка таблица разпъва колоната. */
.grid > *{min-width:0}
/* Броят колони е ограничен нарочно: auto-fit на широк екран правеше 4 тесни
   колони и таблиците вътре ставаха нечетими. */
@media (min-width:860px){
  .grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.c4{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1280px){
  .grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid.c4{grid-template-columns:repeat(6,minmax(0,1fr))}
}
/* Карта, разпъната на цялата ширина (бутонът за ширина я включва). */
.grid > .span-full{grid-column:1 / -1}
.pagehead{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; flex-wrap:wrap}
.spacer{flex:1}

/* ---------- панели ---------- */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:1rem}
.card h2,.card h3{margin-bottom:.8rem}
.card.tight{padding:.7rem .9rem}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:.9rem 1rem}
.stat .k{color:var(--mut); font-size:.76rem; text-transform:uppercase; letter-spacing:.06em}
.stat .v{font-size:1.7rem; font-weight:800; line-height:1.2; margin-top:.15rem}
.stat.crit .v{color:var(--crit)} .stat.warn .v{color:var(--warn)} .stat.ok .v{color:var(--ok)}

/* ---------- таблици ---------- */
table{width:100%; border-collapse:collapse}
th,td{padding:.55rem .6rem; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle}
th{color:var(--mut); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; font-weight:800}
tbody tr:hover{background:rgba(255,255,255,.028)}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
.tbl-wrap{overflow-x:auto}
.empty{color:var(--mut); padding:1.4rem; text-align:center}

/* ---------- бутони ---------- */
.btn{
  display:inline-block; border:1px solid var(--line); background:var(--bg2); color:var(--txt);
  padding:.4rem .75rem; border-radius:var(--r); cursor:pointer; font:inherit; font-size:.86rem;
}
.btn:hover{background:#263348; text-decoration:none}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn-primary{background:var(--blue); border-color:var(--blue); color:#fff; font-weight:800}
.btn-primary:hover{background:#4a84d2}
.btn-ok{background:var(--green); border-color:var(--green); color:#14321f; font-weight:800}
.btn-danger{background:#8c3030; border-color:#a03a3a; color:#fff}
.btn-danger:hover{background:#a03a3a}
.btn-ghost{background:transparent}
.btn-sm{padding:.22rem .5rem; font-size:.78rem}
.btns{display:flex; gap:.4rem; flex-wrap:wrap}

/* ---------- форми ---------- */
label{display:block; margin-bottom:.75rem; color:var(--mut); font-size:.82rem}
input[type=text],input[type=password],input[type=email],input[type=number],select,textarea{
  width:100%; margin-top:.25rem; padding:.45rem .6rem; font:inherit; font-size:.9rem;
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); color:var(--txt);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue); outline-offset:-1px; border-color:var(--blue)}
.inline-form{display:flex; gap:.5rem; align-items:flex-end; flex-wrap:wrap}
.inline-form label{margin-bottom:0}
.check{display:flex; align-items:center; gap:.45rem; color:var(--txt); font-size:.88rem; margin-bottom:.5rem}
.check input{width:auto; margin:0}

/* ---------- състояния ---------- */
.pill{display:inline-block; padding:.1rem .45rem; border-radius:10px; font-size:.72rem; font-weight:800}
.pill.online{background:rgba(118,208,172,.16); color:var(--ok)}
.pill.offline{background:rgba(227,87,87,.16); color:var(--crit)}
.pill.new{background:rgba(87,147,227,.16); color:var(--blue)}
.pill.disabled{background:rgba(143,163,187,.14); color:var(--mut)}
.pill.ok{background:rgba(118,208,172,.16); color:var(--ok)}
.pill.warn{background:rgba(227,169,87,.16); color:var(--warn)}
.pill.error,.pill.crit,.pill.failed{background:rgba(227,87,87,.16); color:var(--crit)}
.pill.info,.pill.pending,.pill.sent,.pill.running{background:rgba(87,147,227,.16); color:var(--blue)}
.pill.done{background:rgba(118,208,172,.16); color:var(--ok)}
.pill.ack,.pill.resolved,.pill.expired{background:rgba(143,163,187,.14); color:var(--mut)}
.sev-crit{color:var(--crit)} .sev-warn{color:var(--warn)} .sev-info{color:var(--mut)}
.mut{color:var(--mut)}
.small{font-size:.8rem}
.nowrap{white-space:nowrap}

/* ---------- ленти ---------- */
.bar{height:6px; background:var(--bg2); border-radius:4px; overflow:hidden; min-width:70px}
.bar i{display:block; height:100%; background:var(--green); border-radius:4px}
.bar i.warn{background:var(--warn)} .bar i.crit{background:var(--crit)}

/* ---------- съобщения ---------- */
.flash{padding:.6rem .85rem; border-radius:var(--r); margin-bottom:1rem; font-size:.88rem}
.flash.ok{background:rgba(118,208,172,.14); border:1px solid rgba(118,208,172,.4); color:var(--ok)}
.flash.err{background:rgba(227,87,87,.14); border:1px solid rgba(227,87,87,.4); color:#f0a0a0}
.flash.info{background:rgba(87,147,227,.14); border:1px solid rgba(87,147,227,.4); color:#a9c8f2}

/* ---------- вход ---------- */
.loginpage{display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--navy)}
.loginbox{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1.8rem; width:340px}
.loginbox h1{text-align:center; margin-bottom:1.3rem; font-weight:300}
.loginbox .btn{width:100%; margin-top:.4rem}

/* ---------- детайли ---------- */
pre.out{
  background:#0f151e; border:1px solid var(--line); border-radius:var(--r);
  padding:.75rem; overflow:auto; max-height:460px; font-size:.8rem; line-height:1.45;
  white-space:pre-wrap; word-break:break-word; margin:0;
}
details{border:1px solid var(--line); border-radius:var(--r); padding:.5rem .7rem; margin-bottom:.5rem; background:var(--bg2)}
summary{cursor:pointer; font-size:.88rem}
.kv{display:grid; grid-template-columns:auto 1fr; gap:.3rem 1rem; font-size:.86rem}
.kv dt{color:var(--mut)} .kv dd{margin:0}

/* ---------- терминал ---------- */
.term-shell{background:#0b1017; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.term-head{display:flex; align-items:center; gap:.6rem; padding:.45rem .7rem; background:var(--bg2); border-bottom:1px solid var(--line); font-size:.82rem}
#term{
  height:62vh; min-height:340px; overflow:auto; padding:.7rem .85rem; margin:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; line-height:1.4;
  color:#cfe0f0; white-space:pre-wrap; word-break:break-all;
}
#term:focus{outline:none}
.term-input{display:flex; gap:.5rem; padding:.5rem .7rem; border-top:1px solid var(--line); background:var(--bg2)}
.term-input input{flex:1; font-family:ui-monospace,Menlo,Consolas,monospace}
.ansi-b{font-weight:700}
.c30{color:#5c6672}.c31{color:#e35757}.c32{color:#76d0ac}.c33{color:#e3c357}
.c34{color:#5793e3}.c35{color:#c58ae0}.c36{color:#5ec8d8}.c37{color:#dfe7ef}
.c90{color:#8fa3bb}.c91{color:#ff7b7b}.c92{color:#9ae6c4}.c93{color:#ffd980}
.c94{color:#8bb6f0}.c95{color:#dcaaf0}.c96{color:#8ddfe9}.c97{color:#fff}

/* ---------- графика ---------- */
.chart-box{position:relative}
.chart{width:100%; height:210px; display:block; cursor:crosshair}
.span-full .chart{height:260px}
.chart-legend{display:flex; gap:1rem; font-size:.76rem; color:var(--mut); margin-top:.35rem}
.chart-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:.3rem}
.chart-tip{
  position:absolute; pointer-events:none; z-index:5; display:none;
  background:#0f151e; border:1px solid var(--line); border-radius:6px;
  padding:.3rem .5rem; font-size:.76rem; white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.45);
}
.chart-tip b{font-weight:800}
.chart-tip .t{color:var(--mut); display:block; font-size:.7rem; margin-bottom:.1rem}

/* ---------- подреждане на картите ---------- */
.card{position:relative}
.cardtools{
  position:absolute; top:.45rem; right:.5rem; display:flex; gap:.2rem;
  opacity:0; pointer-events:none; transition:opacity .12s;
}
/* Без pointer-events:none прозрачната лента щеше да поема кликовете
   по бутоните под нея, докато картата не е посочена. */
.card:hover .cardtools, .cardtools:focus-within{opacity:1; pointer-events:auto}
/* Запазваме място горе вдясно, за да не застават инструментите върху
   бутоните в заглавния ред на картата (напр. 6ч / 24ч / 3д / 7д). */
.card > .pagehead .btns:last-child{margin-right:3.2rem}
.cardtools button{
  background:var(--bg2); border:1px solid var(--line); color:var(--mut);
  border-radius:5px; cursor:pointer; font-size:.7rem; line-height:1; padding:.22rem .4rem;
}
.cardtools button:hover{color:var(--txt); background:#2a394f}
.cardtools .grab{cursor:grab}
.card.dragging{opacity:.45}
.card.drop-target{outline:2px dashed var(--blue); outline-offset:-2px}
.layout-reset{font-size:.76rem}

@media (max-width:860px){
  .topbar{height:auto; flex-wrap:wrap; padding:.5rem .8rem; gap:.6rem}
  .mainnav{order:3; width:100%}
  .wrap{padding:.8rem}
}