/* =====================================================================
   UNLOOK dashboard: Bookings, additions to app.css
   ---------------------------------------------------------------------
   Loaded after app.css, colour.css and crm.css. The screen is made of
   what the dashboard already has (the toolbar and its tabs, a card, the
   chip, the empty state, the settings rows) and the tile from the
   customer's timeline. Only the list of bookings is new: a day is a
   heading, and under it each booking is one row that opens it.
   Every value is a token of app.css; colours are colour.css's roles.
   ===================================================================== */
/* how many bookings wait to be confirmed, beside Bookings in the menu: the same solid as every count of what is
   waiting for the owner. With nothing waiting there is nothing there. */
.nav a .n.bk-n,.nav a.cur .n.bk-n{min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-chip);background:var(--you-solid);color:var(--on-you-solid);font-size:var(--fs-badge);font-weight:600;line-height:18px;text-align:center}
.nav .n.bk-n:empty{display:none}
.bk-bar{justify-content:space-between}
.bk-f{margin:0 0 12px}
/* the list style (crm.css, 5b): the day and the time each have their column; on a phone the row is three short lines */
.tbl.bk td.bk-d{white-space:nowrap;color:var(--ink-2)}
.tbl.bk td.bk-t{white-space:nowrap;font-weight:500}
@media (max-width:760px){
  .tbl.bk tr.row{grid-template-columns:76px minmax(0,1fr) auto;gap:2px 10px;align-items:center;min-height:64px}
  .tbl.bk td.bk-d{grid-column:1/3;grid-row:1;font-size:var(--fs-sm)}
  .tbl.bk td.st{grid-column:3;grid-row:1;margin:0;justify-self:end}
  .tbl.bk td.bk-t{grid-column:1;grid-row:2}
  .tbl.bk td.c2td{grid-column:2/4;grid-row:2;min-width:0}
  .tbl.bk td.asked{grid-column:2/4;grid-row:3;max-width:none;width:auto}
  /* a booking to confirm: its one action, Confirm, sits at the row's end under its service (every other row has no button; the row opens it) */
  .tbl.bk tr.row:has(td.act:not(:empty)) td.asked{grid-column:2}
  .tbl.bk td.act:not(:empty){display:block;grid-column:3;grid-row:3;justify-self:end;align-self:end;width:auto;padding:0;margin:0}
  .tbl.bk td.act .row-do{height:var(--h-ctl)}
}
.bk-day{margin:0;padding:18px 20px 6px;border-top:1px solid var(--line);font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em;line-height:1.3}
#bk-list>.bk-day:first-child{border-top:0;padding-top:14px}
.bk-rows{list-style:none;margin:0;padding:0 8px 8px}
/* a card is 14 round and its rows sit 8 inside it, so a row is 6 round (outer = inner + padding) */
.bk-row{display:grid;grid-template-columns:72px 32px minmax(0,1fr) auto 14px;gap:12px;align-items:center;width:100%;min-height:56px;padding:8px 12px;border:0;border-radius:var(--r-chip);background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer;touch-action:manipulation;transition:background-color var(--duration-quick) var(--ease-out)}
.bk-row:active{background:var(--press)}
.bk-t{font-size:var(--fs-sm);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-2)}
.bk-w{min-width:0}
.bk-w b{display:block;font-size:var(--fs-body);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-w small{display:block;margin-top:2px;font-size:var(--fs-sm);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-row>svg.i{width:14px;height:14px;color:var(--ink-3)}
.bk-row :is(.chip,.sdot){flex:none}
@media (hover:hover){.bk-row:hover{background:var(--hover)}}
#bk-list .tfoot{color:var(--ink-2)}
/* tabs that are not selected take the second ink (Lc 65 dark): the dashboard's own muted tab ink measures Lc 50 */
#bookings .t-tab:not([aria-selected="true"]){color:var(--ink-2)}
.bk-setup{padding:4px 20px 8px}
@media (max-width:720px){
  .bk-bar{gap:8px}
  .bk-bar>.btn::after{inset:calc(50% - 20px) 0} /* stacked 8 apart (Solid Glass): 40 to press, the two edges touch */
  .bk-bar .t-tabs,.bk-f{display:flex;width:100%}
  .bk-bar .t-tab,.bk-f .t-tab{flex:1 1 auto;justify-content:center;height:var(--h-touch);padding:0 6px}
  .bk-bar .t-tabs-pill,.bk-f .t-tabs-pill{height:var(--h-touch)}
  .bk-bar>.btn{width:100%;height:var(--h-ctl);font-size:var(--fs-body)} /* 32 to see (Solid Glass), 44 to press by the button's invisible edge (app.css) */
  /* the status sits under the name: a phone has no room for it beside */
  .bk-row{grid-template-columns:64px 28px minmax(0,1fr) 14px;gap:4px 8px;min-height:64px;padding-inline:8px}
  .bk-row .cu-ev-ic{width:28px;height:28px}
  .bk-row :is(.chip,.sdot){grid-column:3;grid-row:2;justify-self:start;margin-top:4px}
  .bk-row>svg.i{grid-column:4;grid-row:1}
  .bk-day{padding-inline:16px}
  .bk-setup{padding-inline:16px}
}
@media (prefers-reduced-motion: reduce){.bk-row{transition:none}}