/* Idea 90 — project dashboard (06-dash) */

/* Old project-shell was a white card around the whole page. D puts the title on plaster. */
.project-shell--body-only {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: none;
}

.dashboard-page-d {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.dashboard-skeleton {
  display: grid;
  gap: 12px;
}

.dashboard-skeleton .skeleton--hero {
  min-height: 200px;
  border-radius: var(--r-card);
}

.dashboard-skeleton .skeleton--panel {
  min-height: 120px;
  border-radius: var(--r-card);
}

/* Donut inside analytics cards — flat like mock, not legacy panel */
.analytics-d .donut-chart {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.analytics-d .donut-chart-caption {
  display: none;
}

.analytics-d .donut-chart-body {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
}

.analytics-d .donut-chart-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* d-screens pins the figure at flex: none. The empty line is 28ch,
   wider than the column, so the last letters leave the card. */
.analytics-d .donut-wrap-d {
  min-width: 0;
}

.analytics-d .card-d {
  min-width: 0;
}

.analytics-d .donut-wrap-d .donut-chart:has(.donut-chart-empty) {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.analytics-d .donut-chart-empty-copy {
  flex: 1 1 0;
  min-width: 10.25rem;
  max-width: 100%;
}

.analytics-d .donut-chart-empty-copy p {
  max-width: min(28ch, 100%);
}

.analytics-d .donut-chart-empty-copy .btn {
  max-width: 100%;
  white-space: normal;
}

.analytics-d .donut-chart-ring {
  width: 104px;
  flex: none;
}

.analytics-d .donut-chart-ring--thick,
.analytics-d .donut-chart-ring--thin {
  width: 104px;
}

.analytics-d .donut-chart-legend {
  flex: 1;
  min-width: 140px;
  gap: 8px;
}

.analytics-d .donut-chart-legend-item {
  border: 0;
  background: transparent;
  padding: 0;
  width: 100%;
  font: 400 13px var(--font-body);
  color: var(--d-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}

.analytics-d .donut-chart-legend-item:hover,
.analytics-d .donut-chart-legend-item--active {
  border-color: transparent;
  background: transparent;
  transform: none;
}

.analytics-d .donut-chart-live {
  display: none;
}

.analytics-d .card-d > div:first-child h3 {
  margin: 0;
  font: var(--w-display2) 18px var(--font-display);
  letter-spacing: -0.02em;
}

/* Compact quick expense on dashboard */
.dash-quick-d.card-d {
  padding: 18px 20px;
}

.dash-quick-d .expense-quick-add {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.dash-quick-d .expense-quick-add-head .form-subtitle {
  font: var(--w-display2) 17px var(--font-display);
  margin: 0 0 4px;
}

.dash-quick-d .expense-quick-add-hint {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--d-muted);
}

.dash-quick-d .input,
.dash-quick-d select.input {
  font: 500 16px var(--font-body);
  border: var(--input-border);
  background: var(--input-bg);
  border-radius: var(--r-input);
  padding: 11px 12px;
  width: 100%;
  box-sizing: border-box;
}

.dash-quick-d .field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--d-ink-2);
  margin-bottom: 6px;
  display: block;
}

.dash-quick-d .form-actions {
  margin-top: 12px;
}

.dash-hero-d .fact-d {
  min-height: 100%;
}

.dash-hero-d .fact-gap-d {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.4;
}

.dash-hero-d .fact-empty-d {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--d-muted);
}

.dash-hero-d .fact-link-d {
  margin-top: 8px;
  align-self: flex-start;
  font: 600 14px var(--font-body);
  color: var(--d-primary);
  text-decoration: none;
}

.dash-hero-d .fact-link-d:hover {
  text-decoration: underline;
}

/* Donut rings — same weight as the D mock, solid colors, no wash */
.analytics-d .donut-chart-wash {
  display: none;
}

.analytics-d .donut-chart-seg,
.analytics-d .donut-chart-seg:not(.donut-chart-seg--active) {
  animation: none;
  stroke-opacity: 1;
}

.analytics-d .donut-chart-track {
  stroke: var(--d-line);
}

.analytics-d .donut-chart-center {
  inset: 18%;
  gap: 0;
}

.analytics-d .donut-chart-center-value,
.analytics-d .donut-chart-center-value--burn,
.analytics-d .donut-chart--category .donut-chart-center-value {
  font: 800 18px/1 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--d-ink);
  white-space: nowrap;
}

.analytics-d .donut-chart-center-label {
  display: block;
  margin-top: 4px;
  font: 500 11px var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--d-muted);
}

.analytics-d .donut-chart-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  box-shadow: none;
  flex: none;
}

.analytics-d .donut-chart-legend-label {
  flex: 1;
  min-width: 0;
}

.analytics-d .donut-chart-legend-amount {
  font: 500 12px var(--font-mono);
  margin-left: auto;
  color: var(--d-ink);
}