/**
 * observability.css — Production Observability Dashboard v1.0
 * Namespace: .ob-
 */

:root {
  --ob-green: #10B981; --ob-amber: #F59E0B; --ob-red: #EF4444;
  --ob-blue: #3B82F6; --ob-purple: #8B5CF6; --ob-cyan: #06B6D4;
  --ob-surface: #F9FAFB; --ob-card: #FFFFFF; --ob-border: #E5E7EB;
  --ob-text: #111827; --ob-sub: #6B7280; --ob-radius: 14px;
}

.ob-section { padding: 18px 0; }
.ob-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.ob-header__title { font-size: 18px; font-weight: 900; color: var(--ob-text); }
.ob-header__actions { display: flex; gap: 6px; align-items: center; }

/* Tabs */
.ob-tabs { display: flex; gap: 2px; margin-bottom: 16px; border-bottom: 1px solid var(--ob-border); overflow-x: auto; }
.ob-tab { padding: 10px 14px; font-size: 11px; font-weight: 700; color: var(--ob-sub); background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s; white-space: nowrap; }
.ob-tab:hover { color: var(--ob-text); }
.ob-tab.active { color: var(--ob-blue); border-bottom-color: var(--ob-blue); }

/* Time selector */
.ob-time { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--ob-surface); border: 1px solid var(--ob-border); color: var(--ob-sub); cursor: pointer; }
.ob-time.active { background: rgba(59,130,246,.1); border-color: var(--ob-blue); color: var(--ob-blue); }

/* KPI row */
.ob-kpis { display: grid; grid-template-columns: repeat(auto-fill,minmax(145px,1fr)); gap: 8px; margin-bottom: 16px; }
.ob-kpi { background: var(--ob-card); border: 1px solid var(--ob-border); border-radius: 12px; padding: 12px 14px; }
.ob-kpi__val { font-size: 22px; font-weight: 900; color: var(--ob-text); font-variant-numeric: tabular-nums; }
.ob-kpi__label { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--ob-sub); letter-spacing: .3px; margin-top: 2px; }
.ob-kpi--good .ob-kpi__val { color: var(--ob-green); }
.ob-kpi--warn .ob-kpi__val { color: var(--ob-amber); }
.ob-kpi--bad  .ob-kpi__val { color: var(--ob-red); }

/* Alert banner */
.ob-alerts { margin-bottom: 14px; }
.ob-alert { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; margin-bottom: 6px; font-size: 12px; font-weight: 700; }
.ob-alert--critical { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); color: var(--ob-red); }
.ob-alert--warning  { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.25); color: var(--ob-amber); }
.ob-alert--info     { background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.25); color: var(--ob-blue); }
.ob-alert__icon { font-size: 16px; flex-shrink: 0; }
.ob-alert__msg { flex: 1; }
.ob-alert__time { font-size: 10px; color: var(--ob-sub); white-space: nowrap; }
.ob-alert__btn { padding: 3px 8px; border-radius: 6px; font-size: 10px; background: rgba(255,255,255,.08); border: none; color: inherit; cursor: pointer; font-weight: 800; }

/* Chart area (sparkline / bar) */
.ob-chart { background: var(--ob-card); border: 1px solid var(--ob-border); border-radius: var(--ob-radius); padding: 14px; margin-bottom: 12px; }
.ob-chart__title { font-size: 12px; font-weight: 800; color: var(--ob-sub); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .3px; }
.ob-chart__canvas { width: 100%; height: 120px; position: relative; }

/* Bar chart */
.ob-bars { display: flex; align-items: flex-end; gap: 2px; height: 100%; }
.ob-bar { flex: 1; min-width: 4px; border-radius: 3px 3px 0 0; background: var(--ob-blue); transition: height .2s; position: relative; }
.ob-bar--error { background: var(--ob-red); }
.ob-bar--warn  { background: var(--ob-amber); }
.ob-bar:hover { opacity: .8; }
.ob-bar__tip { display: none; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--ob-surface); border: 1px solid var(--ob-border); padding: 4px 8px; border-radius: 6px; font-size: 10px; color: var(--ob-text); white-space: nowrap; z-index: 5; }
.ob-bar:hover .ob-bar__tip { display: block; }

/* Tables */
.ob-table-wrap { background: var(--ob-card); border: 1px solid var(--ob-border); border-radius: var(--ob-radius); overflow: hidden; margin-bottom: 12px; }
.ob-table-wrap__title { padding: 10px 14px; font-size: 12px; font-weight: 800; color: var(--ob-sub); border-bottom: 1px solid var(--ob-border); text-transform: uppercase; letter-spacing: .3px; }
.ob-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ob-table th { padding: 7px 10px; font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--ob-sub); background: var(--ob-surface); border-bottom: 1px solid var(--ob-border); text-align: left; white-space: nowrap; }
.ob-table td { padding: 7px 10px; color: var(--ob-text); border-bottom: 1px solid rgba(46,52,70,.4); }
.ob-table tr:hover { background: rgba(59,130,246,.03); }
.ob-table .ob-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

/* Status badges */
.ob-badge { padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 800; }
.ob-badge--healthy  { background: rgba(16,185,129,.1); color: var(--ob-green); }
.ob-badge--degraded { background: rgba(245,158,11,.1); color: var(--ob-amber); }
.ob-badge--critical { background: rgba(239,68,68,.1); color: var(--ob-red); }

/* Latency bar inside table */
.ob-latbar { display: inline-block; height: 6px; border-radius: 3px; vertical-align: middle; margin-left: 6px; }
.ob-latbar--fast { background: var(--ob-green); }
.ob-latbar--mid  { background: var(--ob-amber); }
.ob-latbar--slow { background: var(--ob-red); }

/* Queue cards */
.ob-queues { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 10px; margin-bottom: 14px; }
.ob-queue { background: var(--ob-card); border: 1px solid var(--ob-border); border-radius: 12px; padding: 14px; }
.ob-queue__name { font-size: 12px; font-weight: 800; color: var(--ob-text); margin-bottom: 8px; }
.ob-queue__row { display: flex; justify-content: space-between; font-size: 11px; color: var(--ob-sub); margin-bottom: 2px; }
.ob-queue__val { font-weight: 800; color: var(--ob-text); }

/* Btn */
.ob-btn { padding: 6px 12px; border-radius: 8px; font-size: 11px; font-weight: 800; cursor: pointer; border: 1px solid var(--ob-border); background: var(--ob-surface); color: var(--ob-text); transition: all .12s; }
.ob-btn:hover { border-color: var(--ob-blue); color: var(--ob-blue); }
.ob-btn--primary { background: var(--ob-blue); border-color: var(--ob-blue); color: #fff; }

/* Skeleton */
.ob-skel { height: 50px; border-radius: var(--ob-radius); margin-bottom: 8px; background: linear-gradient(90deg,var(--ob-card) 25%,var(--ob-border) 50%,var(--ob-card) 75%); background-size: 200% 100%; animation: obShim 1.4s infinite; }
@keyframes obShim { 0%{background-position:200% 0}100%{background-position:-200% 0} }

/* Empty */
.ob-empty { padding: 30px; text-align: center; color: var(--ob-sub); font-size: 13px; }

/* Responsive */
@media(max-width:640px) {
  .ob-kpis { grid-template-columns: repeat(2,1fr); }
  .ob-queues { grid-template-columns: 1fr; }
  .ob-tabs { gap: 0; }
  .ob-tab { padding: 8px 10px; font-size: 10px; }
}