/* Sprint 9 — Dashboard 2-kolom */
.s9-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 14px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06));
}
.s9-filter {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.s9-filter > div { display: flex; flex-direction: column; min-width: 150px; }
.s9-filter label { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.s9-filter select { padding: 9px 12px; font-size: 14px; }
.s9-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.s9-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.s9-col { min-width: 0; }

.s9-chart-panel canvas {
  width: 100% !important;
  max-height: 260px;
}

.s9-count {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.s9-table {
  font-size: 12.5px;
}
.s9-table th, .s9-table td {
  padding: 8px 10px;
  white-space: nowrap;
}
.s9-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}
.s9-total-row td,
.s9-total-row th {
  background: var(--teal-light, #e8f4f0);
  border-top: 2px solid var(--teal, #1d5c53);
  border-bottom: none;
  padding-top: 10px;
  padding-bottom: 10px;
}

.s9-see-all {
  margin-top: 12px;
}

/* Mobile: stack vertikal */
@media (max-width: 900px) {
  .s9-grid { grid-template-columns: 1fr; }
  .s9-toolbar { padding: 12px; }
  .s9-filter > div { min-width: 130px; flex: 1; }
}