/* =========================================================
   ContainerBooking — dashboard (the app's home screen).
   Built on manage.css: same rows, same pills, same paper.
   ========================================================= */

.dash__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 30px;
}
.dash__head h1 { font-size: 2.2rem; margin-bottom: 8px; }
.dash__sub { color: var(--ink-soft); }

/* The tab bar has no Account tab, so the dashboard carries the way in —
   and on a phone it is the only one, the top nav being hidden below 940px. */
.dash__head-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.dash__account {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 12px 6px 6px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper-2);
  color: inherit; text-decoration: none; transition: border-color .15s;
}
.dash__account:hover { border-color: var(--ink); }
.dash__account-avatar {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--deep); color: var(--paper);
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: .82rem;
}
.dash__account-text { display: flex; flex-direction: column; min-width: 0; }
.dash__account-name { font-size: .86rem; font-weight: 600; line-height: 1.25; }
.dash__account-mail {
  font-family: "IBM Plex Mono", monospace; font-size: .68rem; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch;
}

/* ---------- The four numbers ---------- */
.dash__stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 40px;
}
.statcard {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 20px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r);
  color: inherit; text-decoration: none;
  transition: border-color .15s, transform .15s var(--ease);
}
.statcard:hover { border-color: var(--ink); }
.statcard:active { transform: scale(.985); }
.statcard__label {
  font-family: "IBM Plex Mono", monospace; font-size: .7rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.statcard__value {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 1.9rem; line-height: 1.1; letter-spacing: -.02em;
}
.statcard__note { color: var(--ink-soft); font-size: .82rem; }

/* The one card that means "do something" carries the accent. */
.statcard--alert.is-hot { border-color: var(--accent); }
.statcard--alert.is-hot .statcard__value { color: var(--accent-d); }

/* ---------- Panels ---------- */
.dash__panel { margin-bottom: 38px; }
.dash__panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.dash__panel-head h2 { font-size: 1.15rem; }
.dash__more {
  font-family: "IBM Plex Mono", monospace; font-size: .78rem;
  color: var(--ink-soft); white-space: nowrap;
}
.dash__more:hover { color: var(--accent); }

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  .dash__head { margin-bottom: 22px; }
  .dash__head h1 { font-size: 1.65rem; }
  /* Booking is the reason the app exists — on a phone the action goes full
     width under the greeting rather than squeezing beside it. */
  .dash__head-actions { width: 100%; flex-direction: column-reverse; align-items: stretch; }
  .dash__cta { width: 100%; }

  .dash__stats { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 30px; }
  .statcard { padding: 14px 15px; }
  .statcard__value { font-size: 1.55rem; }

  .dash__panel { margin-bottom: 28px; }
  .dash__panel-head h2 { font-size: 1.05rem; }
}

@media (max-width: 380px) {
  .statcard__value { font-size: 1.35rem; }
}