/*
============================================================
Club OS Studio
Datei: dashboard.css
Zweck: Control-Dashboard
Phase: 13.3 - Studio Shell
============================================================
*/

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;

  margin-bottom: 24px;
}

.metric-card {
  position: relative;
  overflow: hidden;

  min-height: 154px;

  padding: 22px;
}

.metric-card::after {
  position: absolute;
  right: -28px;
  bottom: -45px;

  width: 125px;
  height: 125px;

  border-radius: 50%;

  background: rgba(124, 77, 255, 0.12);

  content: "";
}

.metric-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin-bottom: 24px;
}

.metric-card__label {
  color: var(--studio-text-muted);

  font-size: 0.8rem;
  font-weight: 720;
}

.metric-card__icon {
  display: grid;

  width: 39px;
  height: 39px;

  border-radius: 11px;

  background: rgba(124, 77, 255, 0.15);

  place-items: center;
}

.metric-card__value {
  position: relative;
  z-index: 1;

  margin-bottom: 4px;

  font-size: 2rem;
  font-weight: 850;
  line-height: 1;
}

.metric-card__meta {
  position: relative;
  z-index: 1;

  margin-bottom: 0;

  color: var(--studio-text-muted);

  font-size: 0.75rem;
}

.dashboard-sections {
  display: grid;
  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(300px, 0.75fr);
  gap: 20px;
}

.dashboard-panel {
  padding: 24px;
}

.dashboard-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;

  margin-bottom: 22px;
}

.dashboard-panel__title {
  margin-bottom: 4px;

  font-size: 1.05rem;
}

.dashboard-panel__subtitle {
  margin-bottom: 0;

  color: var(--studio-text-muted);

  font-size: 0.78rem;
}

.status-list {
  display: grid;
  gap: 12px;
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  padding: 13px 14px;

  border: 1px solid var(--studio-border);
  border-radius: 11px;

  background: rgba(255, 255, 255, 0.02);
}

.status-row__label {
  color: var(--studio-text-muted);

  font-size: 0.8rem;
}

.status-row__value {
  font-size: 0.83rem;
  font-weight: 750;
  text-align: right;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.quick-action {
  padding: 17px;

  border: 1px solid var(--studio-border);
  border-radius: 12px;

  color: var(--studio-text);
  background: rgba(255, 255, 255, 0.025);

  text-align: left;

  transition:
    transform var(--studio-transition),
    background var(--studio-transition),
    border-color var(--studio-transition);
}

.quick-action:hover {
  transform: translateY(-2px);

  border-color: rgba(124, 77, 255, 0.35);

  background: rgba(124, 77, 255, 0.09);
}

.quick-action__icon {
  display: block;

  margin-bottom: 12px;

  font-size: 1.4rem;
}

.quick-action__title {
  display: block;

  margin-bottom: 3px;

  font-size: 0.85rem;
  font-weight: 750;
}

.quick-action__description {
  display: block;

  color: var(--studio-text-muted);

  font-size: 0.7rem;
}