/* Playverse -- the admin's operations pages (dashboard, bookings, people,
   children, security). Everything here is prefixed .ad- ; logical
   properties only, so right-to-left comes free. */

/* tiles: three rows (icon, number, label), a fixed height; the number
   shrinks to fit its tile instead of being cut ("--len" = its length) */
.ad-tiles { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.ad-tiles .tile { min-height: 134px; container-type: inline-size; }
.ad-fit { font-size: 24px; }
@supports (width: 1cqi) {
  .ad-fit { font-size: clamp(16px, calc(100cqi / (var(--len, 6) * .62)), 30px); }
}

/* the two 14-day charts */
.ad-chart-alt .bar i { background: var(--orange); }
.ad-chart .bar.ad-today small { color: var(--ink); font-weight: 800; }
.ad-chart .bar { cursor: default; }

/* a heading row's far end (a total, a "see all" link) */
.ad-end { margin-inline-start: auto; flex: none; }
.card-title .ad-end { font-size: 16px; }

/* page heads with an avatar or bubble beside the title */
.ad-title { flex-wrap: wrap; --gap: 12px; }
.ad-title-text { display: flex; flex-direction: column; min-width: 0; }
.ad-title-text h1 { font-size: 24px; }

/* filters: a search box on its own row, then the choices side by side */
.ad-filters { display: grid; gap: 10px 12px; align-items: end;
              grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
.ad-filters .ad-wide { grid-column: 1 / -1; }
.ad-filters .btn { min-height: 48px; }
.ad-go { flex-wrap: wrap; }
.ad-go .btn:first-child { flex: 1 1 auto; min-width: 0; }
.ad-go .btn.alt { flex: none; width: 48px; padding: 0; }
.ad-searchbar { display: flex; gap: 10px; align-items: center; min-width: 0; }
.ad-searchbar .input-icon { flex: 1 1 auto; min-width: 0; }
.ad-searchbar .btn { min-height: 48px; flex: none; }
@media (max-width: 459px) {
  .ad-searchbar .btn > span { display: none; }
  .ad-searchbar .btn { width: 48px; padding: 0; }
}

/* counts inside the filter chips */
.ad-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px;
            background: rgba(59, 47, 76, .08); font-size: 12px; font-weight: 800; }
.chip.active .ad-count { background: rgba(255, 255, 255, .25); }

/* rows: status and payment badges stack on a phone so the name keeps its room */
.ad-badges { flex-wrap: wrap; }
@media (max-width: 599px) {
  .ad-badges { flex-direction: column; align-items: flex-end; gap: 4px; }
}
.row-item.ad-compact { min-height: 58px; padding: 8px 12px; }
.ad-plus { color: var(--ok); }
.ad-minus { color: var(--bad); }

/* one select and its button on a line */
.ad-inline { display: flex; align-items: flex-end; gap: 10px; min-width: 0; }
.ad-inline .field { flex: 1 1 auto; min-width: 0; }
.ad-inline .btn { flex: none; min-height: 48px; }

.ad-narrow { max-width: 720px; }
.ad-danger { border-color: var(--bad-soft); }
.ad-alert { border-color: #F3C9C6; background: #FFFBFA; }

/* colour swatches (a child's colour) */
.ad-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.ad-swatch { position: relative; width: 44px; height: 44px; flex: none; margin: 0; cursor: pointer; }
.ad-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ad-swatch i { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--c);
               border: 3px solid #fff; box-shadow: 0 0 0 2px var(--line); }
.ad-swatch input:checked + i { box-shadow: 0 0 0 3px var(--ink); }
.ad-swatch input:focus-visible + i { outline: 3px solid #E3D7EC; outline-offset: 3px; }

/* the activity log on a computer: fixed columns, every cell cut with "..." */
.ad-tbl { table-layout: fixed; }
.ad-tbl th, .ad-tbl td { max-width: none; }
.ad-tbl .ad-c-when { width: 20%; }
.ad-tbl .ad-c-who { width: 18%; }
.ad-tbl .ad-c-act { width: 19%; }
.ad-tbl .ad-c-ip { width: 13%; }