/* Admin Alerts: the sidebar count, the dashboard card and the alerts page. */

/* Admin Alerts (card #449): amber for what's waiting on an admin. */
:root {
  --color-admin-alert: #b45309;
  --color-admin-alert-wash: #fef3c7;
  --color-admin-alert-line: #f2c66d;
}
.admin-alerts-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  padding: 0.0625rem 0.5rem;
  border-radius: 9999px;
  background: var(--color-admin-alert);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}
.admin-alerts-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1.5px solid var(--color-admin-alert-line);
  border-radius: 1rem;
  background: var(--color-admin-alert-wash);
}
.admin-alerts-card__icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: var(--color-admin-alert);
  color: #fff;
}
.admin-alerts-card__count {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-admin-alert);
}
.admin-alerts-card__review {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1rem;
  border-radius: 0.625rem;
  background: var(--color-admin-alert);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
}
/* An Admin Alerts group, in the export-3c "header band" treatment: a white
   card, its title and description in a tinted band, and its shifts as plain
   rows split by a hairline. */
.admin-alert-group {
  --admin-alert-border: #e6e0d6;
  --admin-alert-hairline: #efeae1;
  --admin-alert-heading: #15302e;
  --admin-alert-strong: #33474a;
  --admin-alert-muted: #8a938f;
  --admin-alert-day: #fbefd3;
  --admin-alert-day-ink: #8a5a12;

  overflow: hidden;
  border: 1px solid var(--admin-alert-border);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 1px 3px rgb(20 40 38 / 0.06), 0 1px 2px rgb(20 40 38 / 0.04);
  color: #5c6b6a;
}
.admin-alert-group__head {
  padding: 1.5rem 2rem 1.25rem;
  border-bottom: 1px solid var(--admin-alert-border);
  background: #f7f4ef;
}
.admin-alert-group__title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--admin-alert-heading);
}
.admin-alert-group__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: #e0a93b;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
}
.admin-alert-group__description { margin-top: 0.625rem; font-size: 0.875rem; line-height: 1.5; }
.admin-alert-group__empty { padding: 1.5rem 2rem; }

.admin-alert {
  padding: 1.375rem 2rem 1.5rem;

  & + & { border-top: 1px solid var(--admin-alert-hairline); }
}
.admin-alert__client { font-size: 1.125rem; font-weight: 700; color: var(--admin-alert-heading); }
.admin-alert__dsp { margin-top: 0.125rem; font-size: 0.875rem; color: var(--admin-alert-muted); }
.admin-alert__body {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 0.875rem;
}
.admin-alert__day {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.75rem 1rem;
  border-radius: 0.625rem;
  background: var(--admin-alert-day);
}
.admin-alert__day-top {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--admin-alert-day-ink);
}
.admin-alert__day-date { font-size: 0.9375rem; font-weight: 700; color: var(--admin-alert-heading); }
.admin-alert__day-time { font-size: 0.875rem; color: var(--admin-alert-strong); font-variant-numeric: tabular-nums; }
/* Join as one and Keep both, side by side with the sessions (card #489). */
.admin-alert__actions {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 0.5rem;
  width: 12.5rem;
  align-self: flex-end;
  margin-left: 0.5rem;

  form, button { width: 100%; }
}
.admin-alert__join {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.875rem;
  padding: 0 1.375rem;
  border: 0;
  border-radius: 0.5rem;
  background: #2e7d52;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms cubic-bezier(0.2, 0, 0, 1);

  svg { width: 1.125rem; height: 1.125rem; }
  &:hover { background: #226b46; }
  &:active { background: #1b6b43; transform: translateY(0.5px); }
}
.admin-alert__join { justify-content: center; }
.admin-alert__keep {
  height: 2.875rem;
  border: 1px solid #2e7d52;
  border-radius: 0.5rem;
  background: #fff;
  color: #2e7d52;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;

  &:hover { background: #eef6f1; }
}
.admin-alert__void-form { margin-top: auto; padding-top: 0.375rem; }
.admin-alert__void {
  padding: 0.25rem 0.75rem;
  border: 1px solid #b3261e;
  border-radius: 0.5rem;
  background: #fff;
  color: #b3261e;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;

  &:hover { background: #fdecea; }
}
.admin-alert__gap { font-size: 0.8125rem; color: var(--admin-alert-strong); }

/* A shift saved in two at midnight (card #464): the client with the service
   it was, and each part's note and hours. */
.admin-alert-group + .admin-alert-group { margin-top: 1.5rem; }
.admin-alert__client-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; }
.admin-alert__day-time:has(b) { display: flex; justify-content: space-between; gap: 0.5rem; }
.admin-alert__day-time b { font-weight: 600; }
.admin-alert__note { font-weight: 600; color: var(--admin-alert-muted); }
.admin-alert__note--written { color: #2e7d52; }

@media (max-width: 720px) {
  .admin-alert-group__head, .admin-alert, .admin-alert-group__empty { padding-left: 1.125rem; padding-right: 1.125rem; }
  .admin-alert__body { flex-direction: column; align-items: stretch; }
  .admin-alert__actions { width: auto; margin-left: 0; }
}