/* DTDESK Labs — lightweight dashboard preview mockups */

.lab-preview {
  --lab-bg-main: #0D1B2A;
  --lab-bg-elevated: #122235;
  --lab-bg-panel: #07111F;
  --lab-blue: #2563EB;
  --lab-cyan: #06B6D4;
  --lab-text: #F8FAFC;
  --lab-text-muted: #CBD5E1;
  --lab-border: rgba(148, 163, 184, 0.18);
  --lab-success: #16A34A;
  --lab-warning: #D97706;
  --lab-error: #DC2626;

  width: 100%;
  height: 100%;
  background: var(--lab-bg-main);
  color: var(--lab-text-muted);
  font-family: var(--dt-font-body, Inter, system-ui, sans-serif);
  font-size: 7px;
  line-height: 1.2;
  overflow: hidden;
  border-radius: inherit;
}

.lab-preview__frame {
  display: flex;
  width: 100%;
  height: 100%;
}

.lab-preview__sidebar {
  flex: 0 0 22%;
  background: var(--lab-bg-panel);
  border-right: 1px solid var(--lab-border);
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lab-preview__brand {
  width: 70%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--lab-blue), var(--lab-cyan));
  margin-bottom: 4px;
}

.lab-preview__nav-item {
  height: 5px;
  border-radius: 2px;
  background: rgba(148, 163, 184, 0.12);
}

.lab-preview__nav-item.is-active {
  background: rgba(37, 99, 235, 0.45);
}

.lab-preview__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 5px 6px 4px;
  gap: 4px;
}

.lab-preview__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-height: 10px;
}

.lab-preview__toolbar-title {
  flex: 1;
  height: 4px;
  max-width: 42%;
  border-radius: 2px;
  background: rgba(248, 250, 252, 0.35);
}

.lab-preview__toolbar-actions {
  display: flex;
  gap: 3px;
}

.lab-preview__toolbar-pill {
  width: 14px;
  height: 6px;
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.2);
  border: 1px solid var(--lab-border);
}

.lab-preview__toolbar-pill.is-primary {
  background: rgba(37, 99, 235, 0.55);
  border-color: rgba(37, 99, 235, 0.35);
}

.lab-preview__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}

.lab-preview__metric {
  background: var(--lab-bg-elevated);
  border: 1px solid var(--lab-border);
  border-radius: 3px;
  padding: 3px;
  min-height: 18px;
}

.lab-preview__metric-label {
  height: 3px;
  width: 70%;
  border-radius: 2px;
  background: rgba(203, 213, 225, 0.35);
  margin-bottom: 3px;
}

.lab-preview__metric-value {
  height: 5px;
  width: 45%;
  border-radius: 2px;
  background: rgba(248, 250, 252, 0.55);
}

.lab-preview__metric-value.is-cyan { background: rgba(6, 182, 212, 0.75); }
.lab-preview__metric-value.is-success { background: rgba(22, 163, 74, 0.75); }
.lab-preview__metric-value.is-warning { background: rgba(217, 119, 6, 0.75); }

.lab-preview__content {
  flex: 1;
  min-height: 0;
  background: var(--lab-bg-elevated);
  border: 1px solid var(--lab-border);
  border-radius: 3px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lab-preview__content-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.lab-preview__content-title {
  height: 4px;
  width: 35%;
  border-radius: 2px;
  background: rgba(248, 250, 252, 0.3);
}

.lab-preview__status {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 3px;
  border-radius: 999px;
  font-size: 5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--lab-border);
  background: rgba(7, 17, 31, 0.65);
  color: var(--lab-text-muted);
  white-space: nowrap;
}

.lab-preview__status::before {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

.lab-preview__status.is-live { color: var(--lab-success); }
.lab-preview__status.is-pending { color: var(--lab-warning); }
.lab-preview__status.is-alert { color: var(--lab-error); }

/* Chart bars */
.lab-preview__chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  flex: 1;
  min-height: 28px;
  padding-top: 2px;
}

.lab-preview__chart-bar {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: rgba(37, 99, 235, 0.35);
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-bottom: none;
}

.lab-preview__chart-bar:nth-child(2) { height: 55%; background: rgba(37, 99, 235, 0.5); }
.lab-preview__chart-bar:nth-child(3) { height: 78%; background: rgba(6, 182, 212, 0.55); }
.lab-preview__chart-bar:nth-child(4) { height: 42%; }
.lab-preview__chart-bar:nth-child(5) { height: 88%; background: rgba(6, 182, 212, 0.7); }
.lab-preview__chart-bar:nth-child(6) { height: 62%; background: rgba(37, 99, 235, 0.62); }

/* Table rows */
.lab-preview__table {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.lab-preview__table-row {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.6fr;
  gap: 3px;
  align-items: center;
  padding: 2px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.lab-preview__table-row:last-child { border-bottom: none; }

.lab-preview__table-cell {
  height: 3px;
  border-radius: 2px;
  background: rgba(203, 213, 225, 0.22);
}

.lab-preview__table-cell.is-strong {
  background: rgba(248, 250, 252, 0.42);
  width: 80%;
}

.lab-preview__badge {
  justify-self: end;
  width: 12px;
  height: 5px;
  border-radius: 2px;
  background: rgba(37, 99, 235, 0.35);
}

.lab-preview__badge.is-success { background: rgba(22, 163, 74, 0.45); }
.lab-preview__badge.is-warning { background: rgba(217, 119, 6, 0.45); }

/* Pipeline */
.lab-preview__pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  flex: 1;
}

.lab-preview__pipeline-col {
  background: rgba(7, 17, 31, 0.55);
  border: 1px solid var(--lab-border);
  border-radius: 3px;
  padding: 3px 2px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lab-preview__pipeline-head {
  height: 3px;
  width: 70%;
  border-radius: 2px;
  background: rgba(203, 213, 225, 0.28);
  margin-bottom: 1px;
}

.lab-preview__pipeline-card {
  height: 8px;
  border-radius: 2px;
  background: rgba(37, 99, 235, 0.22);
  border: 1px solid rgba(37, 99, 235, 0.18);
}

.lab-preview__pipeline-card.is-cyan {
  background: rgba(6, 182, 212, 0.2);
  border-color: rgba(6, 182, 212, 0.18);
}

/* Activity / chat list */
.lab-preview__activity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.lab-preview__activity-item {
  display: grid;
  grid-template-columns: 6px 1fr auto;
  gap: 3px;
  align-items: center;
}

.lab-preview__activity-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lab-cyan);
}

.lab-preview__activity-line {
  height: 3px;
  border-radius: 2px;
  background: rgba(203, 213, 225, 0.25);
}

.lab-preview__activity-line.is-short { width: 65%; }

/* Booking calendar strip */
.lab-preview__calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.lab-preview__calendar-day {
  aspect-ratio: 1;
  border-radius: 2px;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid transparent;
}

.lab-preview__calendar-day.is-booked {
  background: rgba(37, 99, 235, 0.35);
  border-color: rgba(37, 99, 235, 0.25);
}

.lab-preview__calendar-day.is-today {
  background: rgba(6, 182, 212, 0.35);
  border-color: rgba(6, 182, 212, 0.3);
}

/* Card container integration */
.dt-mockup--lab {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  background: var(--dt-bg-dark-secondary);
}

.dt-mockup--lab .dt-mockup-inner {
  display: none;
}

@media (max-width: 480px) {
  .lab-preview__metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .lab-preview__pipeline {
    grid-template-columns: repeat(2, 1fr);
  }
}