/* Lane B — desk */

/* The facelift's desk layer. facelift.css already carries the whole of
   re-serve's app/desk.css (the 900px two-column panel, the aside's four-pixel
   edges, the Setup Open Play row grid, `.mc-openplay__acts`, `.mc-register*`,
   `.mc-receipt--tight`, `.mc-desk__simple/__pair/__row`) — this file is only
   what those rules need on top of them to land on THIS app's markup, plus the
   few arrangements the Next app writes as inline styles and a stylesheet has to
   say out loud.

   Loaded after facelift.css by the layout, so it wins on order at equal weight.
   Nothing here is ever added to application.css. */

/* ===========================================================================
   THE DESK'S OPEN-PLAY SESSION (forms-v3/DeskOpenPlay.dc.html, and
   desk/OpenPlaySession.tsx, which draws the two columns with inline styles).
   ======================================================================== */

/* 880 WIDE, AND IT HAS TO OUTWEIGH AN ID. facelift.css says this on
   `.mc-modal__panel.is-wide.mc-openplay__panel`, which is three classes and
   loses to application.css's own `#admin-calendar .mc-modal__panel` — an id
   rule, and the panel would keep the desk's 76rem. Said again here one step
   stronger, which is the same load-order/weight trap facelift.css's own
   `.btn.btn-primary` note names. */
#admin-calendar .mc-modal__panel.mc-openplay__panel {
  width: min(100%, 880px);
  max-width: min(100%, 880px);
}

/* AND THE WEEK-SETUP PANEL FOR THE SAME REASON: facelift.css's own
   `.mc-modal__panel.mc-weeksetup__panel` is two classes against that id rule and
   the eight-column row would be squeezed back into 76rem. */
#admin-calendar .mc-modal__panel.mc-weeksetup__panel {
  width: min(100%, 1000px);
  max-width: min(100%, 1000px);
}

/* The session's five facts on the left, the register on the right, and the
   register takes the height the ticket sets. */
.mc-openplay__cols {
  display: flex;
  gap: 24px;
  align-items: stretch;
}
.mc-openplay__card {
  width: 300px;
  flex: none;
  display: flex;
  flex-direction: column;
  padding: 8px 16px;
}
.mc-openplay__reg {
  flex: 1;
  min-width: 0;
  display: flex;
}

/* A phone has no room for two columns: the ticket, then who is coming. */
@media (max-width: 767.98px) {
  .mc-openplay__cols { display: block; }
  .mc-openplay__card { width: auto; }
  .mc-openplay__reg { display: block; margin-top: 16px; }
}

/* THE TICKET'S ROWS TAKE THE MOCKUP'S 16px BETWEEN LABEL AND VALUE.
   facelift.css's `.mc-receipt` is a gap-less grid — a receipt whose rules must
   run unbroken across both columns — and the session's tight variant has no
   rules to break: DeskOpenPlay.dc.html sets its rows out as a 64px label and a
   16px gap. */
.mc-receipt--tight { column-gap: 16px; }

/* The card's own three buttons are WHITE on the parchment ticket, not the
   parchment showing through Bootstrap's transparent outline. */
.mc-openplay__acts .btn { background: #fff; }

/* The register's own two: the line where the rows would be, and the count down
   the left of each row, which is an index rather than a fact about anybody. */
.mc-register__empty { margin: 0; padding: 12px; }
.mc-register__ord { color: var(--mc-muted); }

/* Move on the left, Done on the right, standing in the body at the end of the
   list rather than as a bar pinned over it — so `.mc-modal__actions`'s own
   margin gives way to the board's 16px of padding. */
.mc-openplay__row {
  gap: 12px;
  margin-top: 0;
  padding-top: 16px;
}
.mc-openplay__row .btn-primary { min-width: 160px; }

/* --- and where the players are going (forms-v3/MovePlayers.dc.html) -------- */

/* One evening per chip, the hours on the left and the room left on the right,
   one under the other. `.mc-chip` is the kit's; only the arrangement is here. */
.mc-openplay__targets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.mc-chip.mc-openplay__target {
  width: 100%;
  height: 44px;
  justify-content: space-between;
  text-align: left;
}
.mc-openplay__target .mc-sub { font-size: 13px; color: var(--mc-muted); }

/* ===========================================================================
   SET OPEN PLAY (forms-v3/OpenPlaySetup.dc.html, desk/SetOpenPlaySheet.tsx) and
   SETUP OPEN PLAY (WeekSetup.tsx): the chips are real checkboxes underneath.
   ======================================================================== */

/* THE CHIP IS A LABEL AND THE ANSWER IS STILL A CHECKBOX, which is the cheapest
   honest way to draw the mockups' toggle chips on this app's markup: the box
   keeps its name, its tab stop and its `.checked` — everything
   `saveOpenPlay` and `readWeekSetupRows` read — and only the label is repainted.
   `.mc-chip`'s own declarations do the shape; these two say which state the
   input beside it is in, because a checkbox has no class to toggle. */
.mc-chip__box {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mc-chip__box:checked + .mc-chip {
  border-color: var(--mc-brand);
  background: rgba(123, 63, 33, 0.1);
  color: var(--mc-brand);
  font-weight: 600;
}
.mc-chip__box:focus-visible + .mc-chip {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.mc-chip__box:disabled + .mc-chip { opacity: 0.45; }
.mc-chip { cursor: pointer; }

/* The weekly rows' day and court chips sit in a plain flex row, not Bootstrap's
   .btn-group, so the group's own joined corners are not wanted. */
.mc-weekrow__days,
.mc-weekrow__courts {
  display: flex;
  align-items: center;
}

/* --- Set Open Play's own two arrangements --------------------------------- */

/* The two hour selects under the date, sharing the row (the date box above them
   is the field's own control and takes the full width). */
.mc-openplay__hours { margin-top: 8px; }
.mc-openplay__hours > .form-select { flex: 1; min-width: 0; }

/* Slots is as wide as its stepper; Price per head takes what is left. */
.mc-desk__pair > .mc-field + .mc-field { flex: 1; min-width: 0; }

/* THE STEPPER'S MIDDLE IS THE BOX, not a span reporting it: `saveOpenPlay` reads
   `.value` and somebody at a counter still types 30 rather than pressing + six
   times. So the input is painted as `.mc-step span` and gives up the browser's
   own spinner, which would be a second pair of arrows inside the first.
   OpenPlaySetup.dc.html draws the whole control at 44. */
.mc-desk__pair .mc-step { height: 44px; }
.mc-step .mc-step__value {
  width: 52px;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.mc-step .mc-step__value::-webkit-outer-spin-button,
.mc-step .mc-step__value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ===========================================================================
   THE DESK'S BAR — ported from re-serve app/admin.css (its `.mc-navbar--admin`
   block, which Phase 0 did not carry over: facelift.css took facelift.css,
   desk.css, reports.css, settings.css and about.css and left admin.css alone).
   Scoped to `--admin` there for the reason it is scoped here — the customer's
   bar is facelift.css's to repaint, and two files painting one class is how they
   come to disagree.
   ======================================================================== */

.mc-navbar--admin .mc-navbar__links a {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.mc-navbar--admin .mc-navbar__links a.is-current {
  border-bottom-color: var(--mc-brand);
}

/* The account, as a 13 muted chip beside the links (APP_DESIGN §3.2). It is the
   <summary> of the account menu, which is where the desk's sign-out lives. */
.mc-navbar--admin .mc-usermenu > summary {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}
.mc-navbar--admin .mc-usermenu > summary:hover {
  color: #fff;
}

/* Sign out is a <button> in both menus, so it needs the size the links beside
   it have — application.css draws its colour and hover already. */
.mc-navbar--admin .mc-signout {
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
/* Inside the account panel it is one of the panel's own lines, not one of the
   bar's — same size and weight as Settings above it. */
.mc-navbar--admin .mc-usermenu__panel .mc-signout {
  font-size: 0.9rem;
  font-weight: 400;
}

/* On a phone the panel is white and the links inside it are ink, so the
   underline the bar wears would be a mahogany rule under a mahogany word. */
@media (max-width: 640px) {
  .mc-navbar--admin .mc-navbar__links a {
    border-bottom: 0;
  }
}

/* --- the desk panel's foot (DeskBookingEdit.dc.html, DeskBooking.dc.html) ---
   The pinned pair is `.mc-desk__row` (facelift.css: flex, 12px, every button an
   equal share). Under it, everything else a booking is up for as a LINE OF TEXT
   rather than a second bar of buttons — which is exactly how the boards draw
   "Delete booking", and these are the same kind of thing. */
.mc-desk__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 12px;
}
/* A row with nothing in it must not take its own padding: every button in here
   is hidden on a settled booking, and an empty band under the pinned row reads
   as something that failed to load. */
.mc-desk__acts:not(:has(> .btn:not([hidden]))) { display: none; }
.mc-desk__acts > .btn {
  flex: none;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 15px;
  font-weight: 500;
}
/* The desk's own `.mc-desk .mc-modal__actions .btn { min-height: 44px }` in
   facelift.css is about the pinned row, not this line. */
#admin-calendar .mc-desk__acts > .btn { min-height: 0; }

/* The register's own foot, where the move that acts on its rows lives: it is a
   control rather than a row of data, so it keeps the frame's padding and draws
   no rule of its own over the last reservation. */
.mc-register__table tfoot td {
  padding: 8px 12px;
  border-top: 1px solid var(--mc-line);
}