/* C5 — HUD: yuqori panel, filtrlar, pipeline polosasi, vidjetlar, jonli oqim, ofis devori */

/* ------------------------------ Topbar ------------------------------ */
.topbar{
  flex:none;
  display:flex; align-items:center; gap:14px;
  min-height:58px; padding:8px 18px;
  background:var(--topbar-bg); color:var(--topbar-text);
  position:relative; z-index:20;
}
.brand{display:flex; align-items:center; gap:10px; flex:none}
.logo{
  width:30px; height:30px; border-radius:8px; flex:none;
  display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:6px;
  background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px var(--topbar-line);
}
.logo i{border-radius:2px; background:#fff}
.logo i:first-child{background:var(--accent-2)}
.topbar h1{font-size:16px; font-weight:800; letter-spacing:.1px; line-height:1.1; color:#fff}
.sub{margin:1px 0 0; font-size:11px; color:var(--topbar-muted)}
.sub code{background:var(--topbar-chip); padding:0 5px; border-radius:5px; color:#ffd58a; font-size:10.5px}

/* Squad bo'yicha band/jami */
.squads{display:flex; gap:6px; margin-left:auto; flex:none}
.hsq{
  display:flex; align-items:center; gap:8px; padding:5px 10px 5px 8px;
  background:var(--topbar-chip); border:1px solid var(--topbar-line); border-radius:10px;
  line-height:1.05; min-width:88px;
}
.hsq .sw{width:4px; align-self:stretch; border-radius:3px; background:var(--c, #8aa)}
.hsq .nm{display:block; font-size:10.5px; color:var(--topbar-muted); font-weight:600; letter-spacing:.2px}
.hsq .val{font-size:16px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums}
.hsq .val small{font-size:11px; font-weight:600; color:var(--topbar-muted)}
.hsq .bar{display:block; height:3px; margin-top:4px; border-radius:2px; background:rgba(255,255,255,.12); overflow:hidden; width:58px}
.hsq .bar i{display:block; height:100%; width:0; background:var(--c); transition:width .4s}
.hsq.zero .val{color:var(--topbar-muted)}

.stats{display:flex; gap:4px; flex:none; padding-left:10px; border-left:1px solid var(--topbar-line)}
.stat{padding:3px 8px; text-align:center; min-width:48px; line-height:1.05}
.stat b{display:block; font-size:17px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums}
.stat span{font-size:10px; color:var(--topbar-muted); text-transform:uppercase; letter-spacing:.5px}
.stat.busy b{color:var(--accent-2)}
.stat.idle b{color:#c9d3e4}
.stat.evt b{color:#8ec1ff}

/* Ofis soati va tadbir chipi */
.officeclock{display:flex; align-items:center; gap:8px; flex:0 1 440px; min-width:150px}
.clockface{
  display:flex; align-items:baseline; gap:5px; flex:none;
  padding:5px 10px; border-radius:10px; background:rgba(0,0,0,.18); box-shadow:inset 0 0 0 1px var(--topbar-line);
}
#clock{font-size:17px; font-weight:600; color:#fff; letter-spacing:.5px; font-variant-numeric:tabular-nums}
.clockface .speed{
  font-style:normal; font-size:10px; font-weight:800; color:#13233f; background:#ffd166;
  padding:1px 5px; border-radius:6px; transform:translateY(-2px);
}
.clockface small{font-size:10px; color:var(--topbar-muted)}
.evchip{
  display:flex; align-items:center; gap:7px; min-width:0; flex:1 1 auto;
  padding:6px 10px; border-radius:20px; font-size:12px; font-weight:600;
  background:var(--accent-soft); color:#0f5f3b; border:1px solid var(--accent-line);
}
.evchip i{width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; animation:pulse 2s infinite}
.evchip .txt{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.evchip .more{flex:none; font-size:10.5px; font-weight:800; background:#fff; color:var(--accent); border-radius:10px; padding:0 6px}
.evchip.empty{background:var(--topbar-chip); color:var(--topbar-muted); border-color:var(--topbar-line); font-weight:500}
.evchip.empty i{background:var(--topbar-muted); animation:none; opacity:.6}

.conn{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--topbar-muted); flex:none;
  background:var(--topbar-chip); border:1px solid var(--topbar-line); padding:6px 10px; border-radius:10px}
.conn i{width:8px; height:8px; border-radius:50%; background:var(--err)}
.conn.on i{background:var(--accent-2); animation:pulse 2s infinite}
.conn em{font-style:normal; white-space:nowrap}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,194,126,.45)}70%{box-shadow:0 0 0 7px rgba(52,194,126,0)}100%{box-shadow:0 0 0 0 rgba(52,194,126,0)}}

/* ------------------------------ Subbar (qidiruv, filtrlar, tugmalar) ------------------------------ */
.subbar{
  flex:none; display:flex; align-items:center; gap:10px;
  padding:7px 18px; background:var(--panel); border-bottom:1px solid var(--line);
  box-shadow:0 2px 10px rgba(19,35,63,.05); position:relative; z-index:15;
}
#search{
  flex:none; background:var(--panel-2); border:1px solid var(--line-2); color:var(--text);
  padding:6px 11px; border-radius:var(--r-sm); width:190px; outline:none; font-size:13px;
}
#search:focus{border-color:var(--info); box-shadow:var(--focus)}
.filters{display:flex; align-items:center; gap:6px; flex:1 1 auto; min-width:0}
.controls{display:flex; align-items:center; gap:6px; flex:none; margin-left:auto}
.ghost{
  background:var(--panel-2); border:1px solid var(--line-2); color:var(--ink);
  height:32px; min-width:32px; padding:0 8px; border-radius:var(--r-sm); cursor:pointer; font-size:14px;
  display:inline-flex; align-items:center; justify-content:center; gap:5px; transition:.15s;
}
.ghost:hover{border-color:#9fb0c8}
.ghost.on{border-color:var(--accent-line); background:var(--accent-soft)}
.ghost.danger:hover{border-color:var(--err); color:var(--err)}
.ghost:disabled{opacity:.45; cursor:not-allowed}

/* Filtr chiplari */
.vsep{width:1px; height:20px; background:var(--line-2); flex:none}
.fgroup{display:flex; align-items:center; gap:4px; flex:none}
.fgroup.scroll{flex:0 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none; mask-image:linear-gradient(90deg,#000 92%,transparent)}
.fgroup.scroll::-webkit-scrollbar{display:none}
.fchip{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  height:28px; padding:0 10px; border-radius:16px; cursor:pointer;
  background:var(--chip); border:1px solid transparent; color:var(--ink);
  font-size:12px; font-weight:600; white-space:nowrap; transition:background .15s, color .15s, border-color .15s;
}
.fchip i{width:8px; height:8px; border-radius:50%; background:var(--c)}
.fchip:hover{border-color:var(--line-2)}
.fchip.on{background:var(--chip-on); color:var(--chip-on-text); border-color:var(--chip-on)}
.fchip.on i{box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.fchip[hidden]{display:none}
.fchip.clear{background:transparent; color:var(--muted); border-color:var(--line-2)}
.fchip.clear:hover{color:var(--err); border-color:var(--err)}
.fstatus{display:inline-flex; align-items:center; gap:6px; flex:none; font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.4px}
.fstatus select{
  height:28px; border-radius:16px; border:1px solid var(--line-2); background:var(--panel-2); color:var(--ink);
  font-size:12px; font-weight:600; padding:0 8px; text-transform:none; letter-spacing:0; cursor:pointer; outline:none;
}
.fstatus select.on{background:var(--chip-on); color:var(--chip-on-text); border-color:var(--chip-on)}
.vwrap{display:inline-flex; cursor:help}
.vwrap .ghost:disabled{pointer-events:none}
.ghost.seg{font-size:12px; font-weight:600; padding:0 10px}
.ghost.seg .ico{font-size:14px}
.ghost[data-variant="economy"]{background:#fff6e0; border-color:#f0d494}

/* ------------------------------ S3: pipeline polosasi ------------------------------ */
.pipes{
  flex:none; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px;
  padding:6px 18px; background:var(--panel-2); border-bottom:1px solid var(--line);
  position:relative; z-index:14;
}
.pipes.hide{display:none}
.lane{
  position:relative; display:flex; align-items:center; gap:8px; min-width:0;
  padding:4px 8px 6px; border-radius:var(--r-sm); background:var(--panel); border:1px solid var(--line);
  overflow:hidden;
}
.lane-nm{flex:none; display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:var(--ink); width:62px}
.lane-nm i{width:8px; height:8px; border-radius:50%; background:var(--c); opacity:.45}
.lane.busy .lane-nm i{opacity:1; box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent)}
.stages{list-style:none; margin:0; padding:0; display:flex; align-items:center; flex:1 1 auto; min-width:0; gap:0}
.stg{
  position:relative; flex:1 1 0; min-width:0; height:22px; margin-left:10px;
  display:flex; align-items:center; justify-content:center; gap:3px;
  border-radius:11px; font-size:10.5px; font-weight:700; color:#9aa6b8;
  background:var(--surface-3); border:1px solid transparent;
  overflow:hidden; cursor:default; transition:background .2s, color .2s;
}
.stg:first-child{margin-left:0}
.stg::before{ /* bosqichlar orasidagi ulagich */
  content:''; position:absolute; left:-11px; top:50%; width:10px; height:2px; background:var(--line-2);
}
.stg:first-child::before{display:none}
.stg .lbl{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:relative}
.stg .pct{font-size:9.5px; font-weight:800; position:relative}
.stg.present{color:var(--ink); background:var(--chip); border-color:var(--line-2)}
.stg.passed{color:var(--c); background:color-mix(in srgb, var(--c) 10%, var(--panel)); border-color:color-mix(in srgb, var(--c) 30%, transparent)}
.stg.passed::before, .stg.active::before{background:var(--c)}
.stg.active{
  color:#fff; border-color:var(--c);
  background:linear-gradient(90deg, var(--c) calc(var(--p, 0) * 1%), color-mix(in srgb, var(--c) 72%, #000) 0);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent);
}
.stg.active::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform:translateX(-100%); animation:stgShine 2.4s infinite;
}
@keyframes stgShine{to{transform:translateX(100%)}}
.stg.next{border:1.5px dashed var(--c); color:var(--c); background:var(--panel)}
.stg.err{background:#fde8e8; color:var(--err); border-color:#f5b5b7}
.stg.active.err{background:var(--err); color:#fff}
.lane-next{flex:none; font-size:10.5px; font-weight:700; color:var(--c); white-space:nowrap; max-width:120px; overflow:hidden; text-overflow:ellipsis}
.lane-next.idle{color:var(--muted); font-weight:500}
.lane-next.end{color:var(--ok)}
.lane-bar{position:absolute; left:0; right:0; bottom:0; height:2px; background:transparent}
.lane-bar i{display:block; height:100%; width:0; background:var(--c); transition:width .5s}

/* ------------------------------ S4: vidjetlar ------------------------------ */
.widget{flex:none; border-bottom:1px solid var(--line)}
.w-head{display:flex; align-items:center; gap:8px; padding:8px 12px 6px 8px}
.w-tog{
  display:flex; align-items:center; gap:4px; border:0; background:none; cursor:pointer; padding:2px 4px; border-radius:6px;
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--ink);
}
.w-tog:hover{background:var(--surface-3)}
.w-tog .caret{display:inline-block; width:12px; font-size:10px; color:var(--muted); transition:transform .2s}
.widget.collapsed .caret{transform:rotate(-90deg)}
.widget.collapsed .w-body{display:none}
.w-meta{margin-left:auto; font-size:11px; color:var(--muted); white-space:nowrap}
.w-body{padding:0 12px 10px}
.w-empty{margin:6px 0 0; font-size:11px; color:var(--muted); line-height:1.35}

/* Iste'mol */
.cons{list-style:none; margin:0; padding:0; display:grid; gap:5px}
.cons li{display:grid; grid-template-columns:20px 58px 1fr auto; align-items:center; gap:8px; font-size:12px}
.cons .ci{font-size:14px; text-align:center; line-height:1}
.cons .cl{color:var(--ink); font-weight:600}
.cons .cbar{height:6px; border-radius:4px; background:var(--surface-3); overflow:hidden}
.cons .cbar i{display:block; height:100%; width:0; border-radius:4px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); transition:width .6s}
.cons .cv{font-size:11px; color:var(--muted); min-width:58px; text-align:right}
.cons .cv b{color:var(--text); font-weight:600}
.cons li.zero .ci{filter:grayscale(1); opacity:.55}
.cons li.over .cbar i{background:linear-gradient(90deg, var(--warn), #f0b44c)}
.cons li.over .cv b{color:var(--warn)}

/* Server shkafi */
.leds{display:flex; gap:4px}
.leds i, .led{width:8px; height:8px; border-radius:50%; background:#c4ccd8; display:inline-block; flex:none}
[data-state="ok"].led, .leds i[data-state="ok"]{background:var(--accent-2); box-shadow:0 0 6px rgba(52,194,126,.7)}
[data-state="warn"].led, .leds i[data-state="warn"]{background:#f0b44c; box-shadow:0 0 6px rgba(240,180,76,.7)}
[data-state="err"].led, .leds i[data-state="err"]{background:var(--err); box-shadow:0 0 6px rgba(220,61,67,.6); animation:ledBlink 1s steps(2) infinite}
@keyframes ledBlink{50%{opacity:.35}}
.rack-body{display:flex; gap:12px; align-items:flex-start}
.rack{
  flex:none; width:58px; padding:5px; border-radius:6px; display:grid; gap:4px;
  background:linear-gradient(180deg, var(--navy-2), var(--navy)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), var(--shadow-sm);
}
.rack .unit{
  height:16px; border-radius:3px; display:flex; align-items:center; gap:3px; padding:0 5px;
  background:linear-gradient(180deg, #24395f, #1a2b4a); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.rack .unit b{width:4px; height:4px; border-radius:50%; background:#3c4f73}
.rack .unit span{margin-left:auto; width:16px; height:2px; background:rgba(255,255,255,.18); border-radius:1px}
#wRack[data-state="ok"] .rack .unit b:nth-child(1){background:var(--accent-2); animation:rackBlink 1.7s infinite}
#wRack[data-state="ok"] .rack .unit b:nth-child(2){background:#5cc3ff; animation:rackBlink 1.1s infinite .3s}
#wRack[data-state="ok"] .rack .unit:nth-child(2n) b:nth-child(1){animation-duration:2.3s}
#wRack[data-state="ok"] .rack .unit:nth-child(3n) b:nth-child(2){animation-duration:.8s}
#wRack[data-state="warn"] .rack .unit b:nth-child(1){background:#f0b44c}
#wRack[data-state="err"] .rack .unit b:nth-child(1){background:var(--err); animation:ledBlink 1s steps(2) infinite}
@keyframes rackBlink{0%,100%{opacity:1}45%{opacity:.25}}
.rack-stats{margin:0; flex:1; min-width:0; display:grid; gap:2px; font-size:11.5px}
.rack-stats > div{display:flex; align-items:center; gap:6px; min-width:0}
.rack-stats dt{display:flex; align-items:center; gap:6px; color:var(--muted); white-space:nowrap}
.rack-stats dd{margin:0 0 0 auto; color:var(--text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums}
.rack-stats dd.mono{font-size:11px}

/* --------------------------- Jonli oqim --------------------------- */
.feed{
  width:320px; flex:none; display:flex; flex-direction:column; min-height:0;
  background:var(--panel); border-left:1px solid var(--line);
}
.feed.hide{display:none}
.feed-head{display:flex; align-items:center; padding:10px 14px 8px; border-bottom:1px solid var(--line)}
.feed-head h2{font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--ink)}
.feed-head .muted{margin-left:auto; color:var(--muted); font-size:12px}
.feed-list{list-style:none; margin:0; padding:8px; overflow-y:auto; flex:1; min-height:0}
.feed-list li{
  background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--info);
  border-radius:var(--r-sm); padding:6px 9px; margin-bottom:5px;
  font-size:11px; font-family:var(--font-mono); color:#41506b;
  animation:slideIn .28s ease both;
}
@keyframes slideIn{from{opacity:0; transform:translateX(14px)}to{opacity:1; transform:none}}
.feed-list li .m{color:#9a6700; font-weight:600}
.feed-list li .p{color:#0b6bcb}
.feed-list li .t{display:block; color:#66768f; margin-top:3px; font-family:var(--font-ui); font-size:12px}
.feed-list:empty::after, .wall-list:empty::after{
  display:block; padding:18px 10px; text-align:center; font-size:12px; color:var(--muted);
}
.feed-list:empty::after{content:"Hali so'rov yo'q — hook kelishi bilan shu yerda ko'rinadi"}
.wall-list:empty::after{content:"Devor hozircha toza"}
.feed-list li .who{color:#17223a; font-weight:600}
.feed-list li.s-error{border-left-color:var(--err)}
.feed-list li.s-done{border-left-color:var(--ok)}
.feed-list li.s-working{border-left-color:var(--warn)}

/* --------------------------- Ofis devori (chap) --------------------------- */
.wall{
  width:290px; flex:none; display:flex; flex-direction:column; min-height:0;
  background:var(--panel); border-right:1px solid var(--line);
}
.wall.hide{display:none}
.wall-head{display:flex; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line)}
.wall-head h2{font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--ink)}
.wall-head .muted{margin-left:auto; color:var(--muted); font-size:12px}
.wall-list{list-style:none; margin:0; padding:8px; overflow-y:auto; flex:1; min-height:0}
.wall-list::-webkit-scrollbar{width:10px}
.wall-list::-webkit-scrollbar-thumb{background:#c3cddb; border-radius:8px}
.wall-list li{
  background:var(--panel-2); border:1px solid var(--line); border-left:3px solid #c2cddc;
  border-radius:var(--r-sm); padding:7px 10px; margin-bottom:6px;
  font-size:12.5px; color:#41506b;
  animation:slideInL .28s ease both;
}
@keyframes slideInL{from{opacity:0; transform:translateX(-14px)}to{opacity:1; transform:none}}
.wall-list .w-top{display:flex; align-items:center; gap:6px; min-width:0}
.wall-list b{color:#17223a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wall-list .w-team{
  flex:none; margin-left:auto; font-size:9.5px; font-weight:700; color:#5a6b85;
  background:var(--chip); border:1px solid var(--line); padding:1px 7px; border-radius:12px; white-space:nowrap;
}
.wall-list .w-txt{display:block; margin-top:2px; line-height:1.35}
.wall-list .w-time{display:block; margin-top:2px; font-size:10px; color:#93a1bb; font-family:var(--font-mono)}
.wall-list li.w-working{border-left-color:var(--ok)}
.wall-list li.w-thinking{border-left-color:var(--think)}
.wall-list li.w-waiting{border-left-color:var(--info)}
.wall-list li.w-done{border-left-color:#1a9d61}
.wall-list li.w-error{border-left-color:var(--err)}
.wall-list li.w-idle{border-left-color:#c2cddc}
.wall-list li.w-move{border-left-color:var(--navy-3); background:linear-gradient(90deg, var(--surface-3), var(--panel-2) 60%)}
.wall-list li.w-move .w-team{background:var(--navy); color:#fff; border-color:var(--navy)}
.wall-list li.w-move .w-txt{color:var(--ink)}

/* ------------------------------ Moslashuvchanlik ------------------------------ */
/* Tor ekranda devor — ofis ustida chiquvchi panel */
@media (max-width:1500px){
  .wall{display:none; position:absolute; left:0; top:0; bottom:0; z-index:30; box-shadow:12px 0 32px rgba(19,35,63,.18)}
  .wall.show{display:flex}
  .wall.show.hide{display:flex}
}
@media (max-width:1440px){
  .sub{display:none}
  .stat.evt{display:none}
}
@media (max-width:1600px){
  .lane-next{display:none}
  .stg .pct{display:none}
  .lane-nm{width:auto}
}
@media (max-width:1380px){
  .ghost.seg .lbl{display:none}
  #search{width:150px}
}
@media (max-height:760px){
  .rack{display:none}
}
@media (max-width:1320px){
  .hsq{min-width:0; padding:4px 8px 4px 6px}
  .hsq .bar{width:44px}
  .clockface small{display:none}
}