/* Ticketing Dashboard — page-specific layout. Extracted from inline styles
   on 2026-05-08 (sprint-S protocol-gap D4) so the page complies with the
   project-wide strict CSP (no 'unsafe-inline'). */

.tkd-range-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tkd-range-label {
  font-weight: 600;
}

.tkd-row {
  margin: 1rem 0;
}

.tkd-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}

.tkd-h-flush {
  margin-top: 0;
}

.tkd-toolbar-tight {
  margin-bottom: 0.5rem;
}

.tkd-muted {
  color: #94A3B8;
}

.tkd-empty-cell {
  text-align: center;
  padding: 1rem;
  color: #94A3B8;
}

/* Stat-icon background variants (the dashboard's KPI strip uses 4 status
   colours that aren't part of the shared palette tokens). */
.tkd-icon-blue   { background: #3b82f6; }
.tkd-icon-amber  { background: #eab308; }
.tkd-icon-green  { background: #10b981; }
.tkd-icon-red    { background: #dc2626; }

/* SLA panel */
.tkd-sla-row {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.tkd-sla-stat-big   { font-size: 2rem;   font-weight: 700; }
.tkd-sla-stat       { font-size: 1.4rem; font-weight: 600; }
.tkd-sla-stat-breached { color: #dc2626; }
.tkd-sla-stat-label {
  color: #94A3B8;
  font-size: 0.85rem;
}

/* Throughput row bars (per-day) */
.tkd-bar {
  display: inline-block;
  height: 10px;
  border-radius: 2px;
  /* width set inline via JS based on data; CSS keeps the geometry */
}
.tkd-bar-created { background: #3b82f6; }
.tkd-bar-closed  { background: #10b981; }

/* Priority / severity bars (renderBars) */
.tkd-bar-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0;
}
.tkd-bar-key {
  width: 80px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
}
.tkd-bar-track {
  flex: 1;
  background: #1f2937;
  border-radius: 3px;
  height: 14px;
  overflow: hidden;
}
.tkd-bar-fill {
  display: block;
  height: 100%;
  /* width + background set inline via JS (dynamic per data point) */
}
.tkd-bar-count {
  width: 50px;
  text-align: right;
}

/* Error variant of empty-cell */
.tkd-empty-cell-err { color: #dc2626; }