/* Business Management Dashboard, a day drawn person by person: the day strip, the schedule, booked time and the
   panel that moves a booking (xd-day, xd-sch, xd-load, xd-tip, xd-mv). Drawn in the business's tokens. Layout only. */

/* Words that belong together in a heading (a day's full name): they go to the next line as one, and break inside only where even that line is too short. */
.xd-keep { display: inline-block; max-width: 100%; }

/* The days to choose from: each link names the day and how many bookings it holds. */
.xd-day-list { display: flex; flex-wrap: wrap; gap: 8px; }
.xd-day { display: grid; align-content: center; min-width: 6.25rem; min-height: 48px; margin: 0; padding: 6px 12px; border: 1px solid var(--x-line); border-radius: 12px; background: var(--x-surface); color: var(--x-ink); line-height: var(--x-lh-label); text-decoration: none; }
.xd-day-d { font-size: .9375rem; font-weight: 600; }
.xd-day-t { font-weight: 400; }
.xd-day-n { color: var(--x-muted); font-size: .8125rem; }
.xd-day[aria-current] { border-color: transparent; background: var(--x-accent); color: var(--x-on-accent); }
.xd-day[aria-current] .xd-day-n { color: inherit; }
@media (max-width: 29.99em) { .xd-day-list li { flex: 1 1 40%; } .xd-day { min-width: 0; } }
@media (hover: hover) and (pointer: fine) { .xd-day:hover:not([aria-current]) { border-color: var(--x-ink); } }

/* The schedule. On a phone, and wherever a browser cannot share rows between a grid and what is inside it, each
   person is a card and the day is a list in the order of the clock. */
.xd-sch-box { --x-gap: 12px; }
.xd-sch { display: grid; gap: 12px; }
.xd-sch-marks, .xd-sch-back, .xd-sch-key { display: none; }
.xd-sch-col { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 14px 16px 16px; border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
.xd-sch-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 12px; }
.xd-sch-face { display: block; width: 2.75rem; overflow: hidden; border-radius: 50%; }
.xd-sch-face .x-img { width: 100%; }
:where(#main) .xd-sch-who :is(h3, h4) { font-size: 1.0625rem; }
.xd-sch-state { display: grid; grid-column: 1 / -1; gap: 4px; justify-items: start; }
.xd-sch-note { font-size: .9375rem; }
.xd-sch-list { display: grid; gap: 8px; }
.xd-sch-list:empty { display: none; }
.xd-sch-card { position: relative; display: grid; align-content: start; gap: 2px; min-width: 0; padding: 10px 12px; border: 1px solid var(--x-hair); border-inline-start: 3px solid var(--x-accent); border-radius: 8px; background: var(--x-bg); }
.xd-sch-item--wait .xd-sch-card { border-style: dashed; border-inline-start-style: solid; border-color: var(--x-line); border-inline-start-color: var(--x-warn); }
.xd-sch-item--done .xd-sch-card { border-inline-start-color: var(--x-line); }
.xd-sch-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
.xd-sch-when { font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.xd-sch-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.xd-sch-tags .x-pill { white-space: normal; }
.xd-sch-name { font-weight: 600; }
.xd-sch-a { display: inline; min-width: 0; margin: 0; padding: 0; color: var(--x-ink); text-decoration: none; }
.xd-sch-a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* the whole card opens the booking */
#main .xd-sch-a:focus-visible { outline: none; }
#main .xd-sch-card:has(.xd-sch-a:focus-visible) { outline: 2px solid var(--x-focus); outline-offset: 2px; }
.xd-sch-what { color: var(--x-muted); font-size: .9375rem; }
.xd-sch-block { padding: 8px 12px; border: 1px dashed var(--x-line); border-radius: 8px; background: var(--x-surface-2); font-size: .9375rem; }
@media (hover: hover) and (pointer: fine) { .xd-sch-card:hover { border-color: var(--x-line); border-inline-start-color: var(--x-accent); } }

/* Where there is room and the browser can do it, the same lists become one grid: a column for each person and a
   row for every few minutes, shared by all of them. A row is at least so tall and grows with what is written in
   it, so the columns always agree about the time and no text is ever cut. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 45em) {
    .xd-sch-key { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--x-muted); font-size: .8125rem; }
    .xd-sch-key li { display: inline-flex; align-items: center; gap: 6px; }
    .xd-sch-chip { flex: none; width: 20px; height: 12px; border: 1px solid var(--x-line); border-radius: 3px; }
    .xd-sch-chip--in { background: var(--x-bg); }
    .xd-sch-chip--busy { border-inline-start: 3px solid var(--x-accent); background: var(--x-bg); }
    .xd-sch-chip--pad { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--x-accent) 34%, transparent) 0 3px, transparent 3px 7px) var(--x-surface); }
    .xd-sch-chip--off { border-style: dashed; background: var(--x-surface-2); }
    .xd-sch-chip--out { background: repeating-linear-gradient(135deg, var(--x-hair) 0 1px, transparent 1px 6px) var(--x-surface-2); }

    .xd-sch {
      --xd-u: .4rem; grid-template-columns: 3.75rem repeat(var(--xd-sch-n, 3), minmax(0, 1fr)); grid-template-rows: auto repeat(var(--xd-sch-rows, 120), minmax(var(--xd-u), auto));
      gap: 0 10px; padding: 16px 16px 20px 6px; border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface);
    }
    .xd-sch-marks { display: grid; grid-column: 1; grid-row: 2 / -1; grid-template-rows: subgrid; color: var(--x-muted); font-size: .75rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
    .xd-sch-marks span { grid-row: var(--xd-s) / span var(--xd-hour, 12); justify-self: end; margin-top: -.6em; white-space: nowrap; }
    .xd-sch-col { grid-column: calc(var(--xd-sch-i, 1) + 1); grid-row: 1 / -1; grid-template-rows: subgrid; gap: 0; padding: 0; border: 0; border-radius: 0; background: none; }
    .xd-sch-head { grid-row: 1; align-content: start; align-items: start; padding: 0 4px 14px; }
    .xd-sch-back, .xd-sch-list { display: grid; grid-column: 1; grid-row: 2 / -1; grid-template-rows: subgrid; gap: 0; }
    .xd-sch-list:empty { display: grid; }
    .xd-sch-back { overflow: hidden; border: 1px solid var(--x-hair); border-radius: 8px; }
    .xd-sch-in, .xd-sch-out { grid-column: 1; grid-row: var(--xd-s) / var(--xd-e); }
    .xd-sch-in { background: var(--x-bg); }
    .xd-sch-out { background: repeating-linear-gradient(135deg, var(--x-hair) 0 1px, transparent 1px 6px) var(--x-surface-2); }
    .xd-sch-rule { grid-column: 1; grid-row: var(--xd-s); border-top: 1px solid var(--x-hair); }
    .xd-sch-item, .xd-sch-block { grid-column: 1; grid-row: var(--xd-s) / var(--xd-e); min-width: 0; margin: 0 5px; }
    .xd-sch-item { display: flex; flex-direction: column; border-radius: 8px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--x-accent) 34%, transparent) 0 3px, transparent 3px 7px) var(--x-surface); }
    .xd-sch-item::before { content: ""; flex: 0 0 calc(var(--xd-lead, 0) * var(--xd-u) / var(--xd-unit, 5)); }
    .xd-sch-item::after { content: ""; flex: 0 0 calc(var(--xd-tail, 0) * var(--xd-u) / var(--xd-unit, 5)); }
    .xd-sch-card { flex: 1; padding: 5px 10px 6px; }
    .xd-sch-pad { display: none; }
    .xd-sch-block { display: grid; align-content: center; padding: 4px 10px; }
  }
}

/* Booked time: the free stretch under each person's line, and the way the figure is counted, shown on request. */
.xd-load-free { font-variant-numeric: tabular-nums; }
.xd-tip { display: grid; gap: 6px; justify-items: start; }
.xd-tip-text { max-width: 62ch; padding: 10px 12px; border: 1px solid var(--x-hair); border-radius: 8px; background: var(--x-bg); font-size: .9375rem; }
.xd-tip-text[hidden] { display: none; }

/* The panel that moves a booking. */
.xd-mv { display: grid; gap: 6px; justify-items: start; }
.xd-mv--open { --x-gap: 12px; justify-items: stretch; padding: 14px; border: 1px solid var(--x-line); border-radius: var(--x-radius, 8px); background: var(--x-bg); }
.xd-mv-set { min-width: 0; }
.xd-mv-new { font-weight: 600; }
.xd-mv-alts { display: grid; gap: 6px; }
.xd-mv-alt-list { display: flex; flex-wrap: wrap; gap: 8px; }

@media print { .xd-sch-item, .xd-sch-out, .xd-sch-chip { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }
@media (forced-colors: active) { .xd-sch-card, .xd-sch-block { border-color: CanvasText; } .xd-day[aria-current] { border-color: Highlight; } }