/* Dashboard: a restrained executive overview, aligned to the navy workspace system. */
#admin #dashboard-pane {
  background: linear-gradient(180deg, #fff 0%, #fcfdff 100%);
}

#admin .dashboard-topline {
  position: relative;
  padding: 4px 2px 20px;
  border-bottom-color: #e6ebf1;
}

#admin .dashboard-kicker { color: #536f93; letter-spacing: .15em; }
#admin .dashboard-topline h2 { color: #1d314d; font-size: 24px; }
#admin .dashboard-topline p { color: #77869a; }
#admin .dashboard-topline .rider-action { padding: 10px 13px; border-color: #d5dee8; background: #f8fafc; color: #324b69; }

#admin .dashboard-period-card {
  position: relative;
  overflow: hidden;
  margin-top: 18px;
  padding: 24px 25px;
  border-color: #1d3555;
  border-radius: 16px;
  background: linear-gradient(135deg, #15263f 0%, #213d60 100%);
  box-shadow: 0 15px 30px rgba(20, 42, 76, .13);
}

#admin .dashboard-period-card::after {
  content: '';
  position: absolute;
  top: -100px;
  right: -62px;
  width: 250px;
  height: 250px;
  border: 42px solid rgba(255,255,255,.045);
  border-radius: 50%;
}

#admin .dashboard-period-card > * { position: relative; z-index: 1; }
#admin .dashboard-period-card span { color: #b8c7da; letter-spacing: .03em; }
#admin .dashboard-period-card strong { margin-top: 9px; font-size: 21px; }
#admin .dashboard-period-card small { color: #b5c4d6; }
#admin .dashboard-period-action { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); }

#admin .dashboard-metrics {
  gap: 10px;
  margin-top: 12px;
  padding: 8px;
  border: 1px solid #e5eaf0;
  border-radius: 15px;
  background: #f7f9fc;
}

#admin .dashboard-metrics article,
#admin .dashboard-metrics article:nth-child(2),
#admin .dashboard-metrics article:nth-child(3) {
  position: relative;
  min-height: 126px;
  padding: 17px;
  overflow: hidden;
  border: 1px solid #e0e6ed;
  border-radius: 11px;
  background: #fff;
}

#admin .dashboard-metrics article::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #8999ac;
}

#admin .dashboard-metrics article:nth-child(1)::before { background: #213a5b; }
#admin .dashboard-metrics article:nth-child(2)::before { background: #60758e; }
#admin .dashboard-metrics article:nth-child(3)::before { background: #9aa7b6; }
#admin .dashboard-metrics strong,
#admin .dashboard-metrics article:nth-child(3) strong { color: #203651; }
#admin .dashboard-metrics span { color: #708095; }
#admin .dashboard-metrics small { color: #8b98a8; }

#admin .dashboard-message { margin: 12px 3px 0; color: #536f93; }

#admin .dashboard-payment-trend {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid #e1e7ee;
  border-radius: 15px;
  background: #fff;
}

#admin .dashboard-trend-heading>div:first-child>span { color: #597496; }
#admin .dashboard-trend-heading h3 { color: #233a56; }
#admin .dashboard-trend-heading p { color: #8290a1; }
#admin .dashboard-trend-controls { border-color: #dce4ec; background: #f7f9fb; }
#admin .dashboard-trend-controls button.active { background: #213a5b; }
#admin .dashboard-trend-total { margin-top: 18px; padding-top: 16px; border-top: 1px solid #edf1f5; }
#admin .dashboard-trend-total strong { color: #203a58; }
#admin .dashboard-trend-day>div { background: #eef2f6; }
#admin .dashboard-trend-day i { background: #3a597c; }

/* The 30-day view stays uncluttered; the exact daily amount appears on hover or tap. */
#admin .dashboard-trend-chart.is-month .dashboard-trend-day { position: relative; }
#admin .dashboard-trend-chart.is-month .dashboard-trend-day::after {
  content: attr(data-trend-detail);
  position: absolute;
  top: 7px;
  left: 50%;
  z-index: 3;
  min-width: max-content;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background: #1d3555;
  box-shadow: 0 8px 18px rgba(18, 41, 75, .2);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity .14s ease, transform .14s ease;
  white-space: nowrap;
}
#admin .dashboard-trend-chart.is-month .dashboard-trend-day.is-selected::after { opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) and (pointer: fine) {
  #admin .dashboard-trend-chart.is-month .dashboard-trend-day { cursor: help; }
  #admin .dashboard-trend-chart.is-month .dashboard-trend-day:hover::after { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 650px) {
  #admin .dashboard-topline h2 { font-size: 20px; }
  #admin .dashboard-period-card { padding: 19px; border-radius: 13px; }
  #admin .dashboard-period-card strong { font-size: 18px; }
  #admin .dashboard-metrics { grid-template-columns: 1fr; }
  #admin .dashboard-metrics article { min-height: 95px; }
  #admin .dashboard-payment-trend { margin-top: 15px; padding: 16px; border-radius: 13px; }
}