/* UX Widgets v3: Compact top-of-dashboard action bar
   Goal: small, button-like, grey background, mobile friendly
*/

.uxw-wrap{
  position: relative;
  z-index: 50;
  --ux-bg: rgba(17,24,39,.92);
  --ux-bg2: rgba(31,41,55,.86);
  --ux-border: rgba(0,0,0,.18);
  --ux-text: rgba(255,255,255,.94);
  --ux-muted: rgba(255,255,255,.72);
  --ux-primary: var(--primary, #f5b638);
  --ux-ok: #22c55e;
  --ux-bad: #ff4b4b;
  --ux-shadow: 0 10px 28px rgba(0,0,0,.20);
  --ux-r: 18px;

  margin: 12px 0 14px;
}

/* Compact bar */
.uxw-bar{
  box-shadow: 0 10px 24px rgba(0,0,0,.18);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap:wrap;

  border: 1px solid var(--ux-border);
  background: linear-gradient(180deg, var(--ux-bg), var(--ux-bg2));
  border-radius: var(--ux-r);
  box-shadow: var(--ux-shadow);
  padding: 10px 10px;
}

.uxw-left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 220px;
}

.uxw-mark{
  width:38px;height:38px;
  border-radius: 14px;
  display:grid;place-items:center;
  font-weight: 950;
  letter-spacing: .4px;
  color: rgba(255,255,255,.95);
  background: rgba(245,182,56,.14);
  border: 1px solid rgba(245,182,56,.38);
}

.uxw-title{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.uxw-title b{
  color: var(--ux-text);
  font-size: 13px;
  letter-spacing: -.01em;
}
.uxw-title span{
  color: var(--ux-muted);
  font-size: 12px;
  margin-top: 4px;
}

/* Pills */
.uxw-pills{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  flex: 1;
}

.uxw-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--ux-border);
  background: rgba(255,255,255,.05);
  color: var(--ux-text);
  text-decoration:none;
  font-weight: 900;
  font-size: 12.5px;
  cursor:pointer;
  user-select:none;
  transition: transform .08s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
  white-space:nowrap;
}
.uxw-pill:hover{ background: rgba(255,255,255,.08); }
.uxw-pill:active{ transform: translateY(1px); }

.uxw-pill.primary{
  border-color: rgba(245,182,56,.55);
  background: rgba(245,182,56,.14);
}
.uxw-pill.primary:hover{ background: rgba(245,182,56,.18); }

.uxw-pill.ghost{
  background: transparent;
}

.uxw-count{
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 950;
  border: 1px solid var(--ux-border);
  background: rgba(255,255,255,.04);
  color: var(--ux-text);
}
.uxw-count.bad{ border-color: rgba(255,75,75,.45); background: rgba(255,75,75,.12); }
.uxw-count.ok{ border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.10); }
.uxw-count.warn{ border-color: rgba(245,182,56,.45); background: rgba(245,182,56,.10); }

/* Mini progress pill */
.uxw-prog{
  display:inline-flex;
  align-items:center;
  gap: 10px;
}
.uxw-prog .bar{
  width: 90px;
  height: 8px;
  border-radius: 999px;
  overflow:hidden;
  border: 1px solid var(--ux-border);
  background: rgba(255,255,255,.10);
}
.uxw-prog .bar > i{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(245,182,56,1), rgba(139,92,246,.95));
}
.uxw-prog small{
  color: var(--ux-muted);
  font-weight: 900;
  font-size: 12px;
}

/* Mobile: stack and keep small */
@media (max-width: 520px){
  .uxw-bar{ padding: 10px; }
  .uxw-left{ width:100%; }
  .uxw-pills{ justify-content:flex-start; }
  .uxw-prog .bar{ width: 72px; }
}