/* Tool theme variables (scoped) */
.drbc-scope.drbc-dark{
  --bg:#0b1220; --text:#e8eeff; --card:#111a2b; --muted:#8ea0c6; --ring:rgba(255,255,255,.14);
  --ok:#58e39b; --warn:#ffd166; --bad:#ff6b6b;
  --pre:#72f5a0; --rpo:#ef4444; --rto:#f43f5e; --wrt:#60a5fa; --post:#72f5a0;
}

.drbc-scope.drbc-light{
  --bg:#f7fbff; --text:#0b1220; --card:#ffffff; --muted:#2e4a72; --ring:rgba(11,18,32,.14);
  --ok:#059669; --warn:#ca8a04; --bad:#dc2626;
  --pre:#16a34a; --rpo:#dc2626; --rto:#b91c1c; --wrt:#2563eb; --post:#16a34a;
}

/* Ensure tool content uses its scoped colors without overriding the page */
.drbc-scope{
  color: var(--text);
}

/* Header row within tool */
.drbc-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.drbc-theme-btn{ white-space:nowrap; }

/* Timeline box */
.drbc-timeline{
  border: 1px solid rgba(184,215,255,.95);
  border-radius: 16px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(247,251,255,.85));
}

/* Timeline bar */
.drbc-bar{
  position:relative;
  height:160px;
  border-radius:12px;
  background: rgba(47,125,255,.06);
  overflow:hidden;
  border: 1px solid rgba(184,215,255,.95);
}

.drbc-seg{ position:absolute; top:28px; bottom:44px; border-radius:8px; }
.drbc-seg.pre{ background:rgba(22,163,74,.18); border:1px solid rgba(22,163,74,.35); }
.drbc-seg.rto{ background:rgba(244,63,94,.16); border:1px solid rgba(244,63,94,.28); }
.drbc-seg.wrt{ background:rgba(37,99,235,.16); border:1px solid rgba(37,99,235,.28); }
.drbc-seg.post{ background:rgba(22,163,74,.12); border:1px solid rgba(22,163,74,.25); }

.drbc-rpo-band{ position:absolute; top:4px; height:12px; background:rgba(220,38,38,.55); border-radius:6px; }

/* Enhanced fills if color-mix is supported */
@supports (color: color-mix(in oklab, red 50%, white)){
  .drbc-seg.pre{ background:color-mix(in oklab, var(--pre) 18%, transparent); border:1px solid color-mix(in oklab, var(--pre) 35%, transparent); }
  .drbc-seg.rto{ background:color-mix(in oklab, var(--rto) 18%, transparent); border:1px solid color-mix(in oklab, var(--rto) 35%, transparent); }
  .drbc-seg.wrt{ background:color-mix(in oklab, var(--wrt) 18%, transparent); border:1px solid color-mix(in oklab, var(--wrt) 35%, transparent); }
  .drbc-seg.post{ background:color-mix(in oklab, var(--post) 14%, transparent); border:1px solid color-mix(in oklab, var(--post) 28%, transparent); }
  .drbc-rpo-band{ background:color-mix(in oklab, var(--rpo) 55%, transparent); }
}

.drbc-axis{
  position:absolute; left:0; right:0; bottom:8px; height:18px;
  color: var(--muted);
  font-size:.75rem;
}

.drbc-tick{
  position:absolute; bottom:0;
  width:1px; height:10px;
  background: rgba(11,18,32,.35);
}
.drbc-scope.drbc-dark .drbc-tick{ background: rgba(255,255,255,.5); }

.drbc-tick-label{
  position:absolute; bottom:10px;
  transform:translateX(-50%);
}

.drbc-marker{
  position:absolute; top:8px; bottom:8px; width:2px;
  background: rgba(11,18,32,.85);
  box-shadow:0 0 0 3px rgba(11,18,32,.10);
}
.drbc-scope.drbc-dark .drbc-marker{
  background:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.2);
}

.drbc-tag{
  position:absolute;
  top:-8px;
  transform:translateX(-50%);
  background: rgba(255,255,255,.92);
  border: 1px solid var(--ring);
  padding:2px 6px;
  border-radius:8px;
  font-size:.72rem;
  color: rgba(11,18,32,.92);
  box-shadow: 0 8px 18px rgba(7,15,31,.10);
}
.drbc-scope.drbc-dark .drbc-tag{
  background: rgba(0,0,0,.35);
  color:#fff;
  box-shadow:none;
}

.drbc-mtd-bracket{ position:absolute; top:0; left:0; height:0; border-top:2px solid rgba(11,18,32,.85); }
.drbc-scope.drbc-dark .drbc-mtd-bracket{ border-top-color:#fff; }

.drbc-mtd-cap{ position:absolute; top:-8px; width:2px; height:22px; background: rgba(11,18,32,.85); }
.drbc-scope.drbc-dark .drbc-mtd-cap{ background:#fff; }

.drbc-mtd-label{
  position:absolute; top:-20px; left:50%;
  transform:translateX(-50%);
  font-size:.75rem;
  color: var(--muted);
}

.drbc-playhead{
  position:absolute; top:10px; bottom:36px;
  width:12px; border-radius:6px;
  background: rgba(11,18,32,.92);
  box-shadow: 0 0 0 4px rgba(11,18,32,.10);
  transform:translateX(0);
}
.drbc-scope.drbc-dark .drbc-playhead{
  background:#fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.2);
}

/* Legend */
.drbc-legend{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
  color: var(--muted);
  font-size:.9rem;
}

.drbc-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--ring);
}

.drbc-scope.drbc-dark .drbc-pill{
  background: rgba(255,255,255,.06);
}

.drbc-sw{
  width:16px; height:10px;
  border-radius:3px;
  display:inline-block;
}

/* Controls */
.drbc-controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (max-width: 820px){
  .drbc-controls{ grid-template-columns:1fr; }
}

.drbc-row{
  display:flex;
  gap:10px;
  align-items:center;
}

.drbc-row label{
  font-size:.92rem;
  color: var(--muted);
  min-width: 180px;
}

.drbc-row input[type=number]{
  width: 140px;
  background: rgba(255,255,255,.92);
  color: var(--text);
  border: 1px solid var(--ring);
  border-radius: 12px;
  padding: 10px 10px;
  outline:none;
}

.drbc-scope.drbc-dark .drbc-row input[type=number]{
  background: rgba(7,15,31,.6);
}

.drbc-actions{
  grid-column: 1/-1;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:4px;
}

/* KPIs */
.drbc-kpis{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:14px;
}
@media (max-width: 820px){
  .drbc-kpis{ grid-template-columns:1fr 1fr; }
}
.drbc-kpi{
  background: rgba(255,255,255,.85);
  border: 1px solid var(--ring);
  border-radius: 16px;
  padding: 12px;
}
.drbc-scope.drbc-dark .drbc-kpi{ background: rgba(255,255,255,.05); }

.drbc-kpi-label{
  font-size:.8rem;
  color: var(--muted);
}
.drbc-kpi-value{
  font-size:1.2rem;
  font-weight:800;
  margin-top:2px;
}

/* Table */
.drbc-tablewrap{
  overflow:auto;
  border-radius: 14px;
  border: 1px solid rgba(184,215,255,.95);
  background: rgba(255,255,255,.82);
}
.drbc-scope.drbc-dark .drbc-tablewrap{
  border-color: var(--ring);
  background: transparent;
}

.drbc-table{
  width:100%;
  border-collapse:collapse;
  min-width: 860px;
}
.drbc-table th, .drbc-table td{
  padding:10px 10px;
  border-bottom:1px solid rgba(11,18,32,.10);
  text-align:left;
}
.drbc-scope.drbc-dark .drbc-table th,
.drbc-scope.drbc-dark .drbc-table td{
  border-bottom:1px solid var(--ring);
}

.drbc-table th{
  font-weight:800;
  color: var(--muted);
  background: rgba(47,125,255,.08);
}
.drbc-scope.drbc-dark .drbc-table th{
  background: rgba(255,255,255,.06);
}

/* Definitions */
.drbc-defs{
  margin:0;
  padding-left:18px;
  line-height:1.7;
  color: var(--text);
}