/* screens/bookings.css — Bookings & calendar. Owner: bookings builder.
   ALL classes prefixed .bk- (collision law). Shared components come from
   shell.css: .card .btn(.btn--danger) .pill .seg .field(.field__err) .toggle
   .modal .empty .hint .ava .vh — this file only holds the calendar itself. */

/* --- calendar card ---------------------------------------------------------- */
.bk-cal{overflow:hidden}
.bk-toolbar{
  display:flex;align-items:center;gap:var(--sp-14);flex-wrap:wrap;
  padding:var(--sp-16) var(--sp-20);border-bottom:1px solid var(--line);
}
.bk-range{margin-left:auto;font-size:var(--fs-md);font-weight:700;letter-spacing:-.01em}
.bk-nav{display:flex;align-items:center;gap:var(--sp-6)}
.bk-flip svg{transform:scaleX(-1)}

/* --- week grid --------------------------------------------------------------- */
.bk-scroll{overflow-x:auto}
.bk-week{
  position:relative;display:grid;grid-template-columns:52px repeat(7,1fr);
  min-width:720px;padding:0 var(--sp-10) var(--sp-20) 0;
}
.bk-gut{display:flex;flex-direction:column}
.bk-gut__head{height:58px}
.bk-gut__body{position:relative}
.bk-gut__t{
  position:absolute;right:var(--sp-10);font-size:var(--fs-meta);font-weight:600;color:var(--muted-2);
  line-height:1;white-space:nowrap;
}

.bk-col{display:flex;flex-direction:column;border-left:1px solid var(--line);min-width:0}
.bk-col__head{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:58px;width:100%;
  transition:background var(--t);
}
.bk-col__head:hover{background:var(--card-2)}
/* the card clips its overflow — the keyboard ring goes inside, never outside */
.bk-col__head:focus-visible{box-shadow:var(--focus-inset)}
.bk-dow{font-size:var(--fs-meta);font-weight:700;color:var(--muted-2)}
.bk-date{
  display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r-circle);
  font-size:var(--fs-btn);font-weight:700;color:var(--ink);
}
/* THE one aurora element of this screen: today's date chip */
.bk-date--today{background:var(--grad-ink);color:var(--on-ink)}

.bk-col__body{
  position:relative;
  background-image:linear-gradient(var(--line) 1px,transparent 1px);
  background-position:0 0;
}
.bk-col.is-closed .bk-col__body{background-image:none;background-color:var(--tint-1)}
.bk-closedlab{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:var(--fs-meta);font-weight:700;color:var(--muted-2);letter-spacing:.12em;
  white-space:nowrap;
}
/* a closed day may still hold appointments — the label steps aside for them */
.bk-closedlab--top{top:var(--sp-8);transform:translateX(-50%)}
.bk-shade{position:absolute;left:0;right:0;background:var(--tint-1);pointer-events:none}

/* booking block — card-on-card with the live-green left edge */
.bk-evt{
  position:absolute;left:3px;right:3px;overflow:hidden;text-align:left;
  background:var(--card);border:1px solid var(--line);border-left:2px solid var(--live);
  border-radius:var(--r-sm);padding:var(--sp-4) var(--sp-8);cursor:pointer;
  box-shadow:var(--e1);
  transition:box-shadow var(--t),border-color var(--t);
}
.bk-evt:hover{box-shadow:var(--e2);border-color:var(--line-2);border-left-color:var(--live);z-index:5}
.bk-evt:focus-visible{box-shadow:var(--focus-inset);z-index:6}
.bk-evt b{
  display:block;font-size:var(--fs-fine);font-weight:700;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bk-evt b + span{
  display:block;font-size:var(--fs-micro);font-weight:500;color:var(--muted);line-height:1.3;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bk-evt--sm{display:flex;align-items:center;gap:var(--sp-6);padding:0 var(--sp-8)}
.bk-evt--sm b{flex:1 1 auto;min-width:0}
.bk-evt--sm b + span{flex:0 1 auto;min-width:0}
/* sits outside the opening hours of its own day — the words are in the block's
   title + a .vh label + the popover; this is only the visual echo */
.bk-evt--off{background:var(--warn-soft);border-color:var(--warn-line);border-left-color:var(--warn-bold)}
.bk-evt--off:hover{border-color:var(--warn-line);border-left-color:var(--warn-bold)}

/* "+N" chip — the 3rd+ overlapping booking collapses into this (opens the day) */
.bk-more{
  position:absolute;right:3px;z-index:6;height:20px;padding:0 var(--sp-8);
  border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink);
  font-size:var(--fs-meta);font-weight:700;line-height:20px;cursor:pointer;
  box-shadow:var(--e2);
  transition:background var(--t);
}
.bk-more:hover{background:var(--ink-2)}
.bk-more:focus-visible{box-shadow:var(--focus-inset)}

/* deep-linked booking highlight */
.bk-evt--hi{border-color:var(--live-line);box-shadow:0 0 0 3px var(--live-soft)}
.bk-evt--hi:focus-visible{box-shadow:0 0 0 3px var(--live-soft),var(--focus-inset)}

/* --- day view ---------------------------------------------------------------- */
/* min-height keeps room for the detail popover on a short (closed) day —
   the card clips overflow, so a popover with nowhere to go loses its buttons */
.bk-day{position:relative;min-height:340px;padding:var(--sp-6) var(--sp-20) var(--sp-20)}
.bk-daynote{padding:var(--sp-14) var(--sp-2) var(--sp-2)}
.bk-dhr{display:flex;gap:var(--sp-14);border-bottom:1px solid var(--line);min-height:60px}
.bk-dhr:last-child{border-bottom:0}
/* an hour the business is not open in — shown, never dropped */
.bk-dhr--off{background:var(--tint-1)}
.bk-dhr__t{flex:none;width:44px;padding-top:var(--sp-12);font-size:var(--fs-meta);font-weight:600;color:var(--muted-2)}
.bk-dhr__slot{flex:1;display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-8) 0;min-width:0}
.bk-devt{
  display:flex;align-items:center;gap:var(--sp-12);text-align:left;
  background:var(--card);border:1px solid var(--line);border-left:2px solid var(--live);
  border-radius:var(--r-md);padding:var(--sp-10) var(--sp-14);cursor:pointer;
  box-shadow:var(--e1);
  transition:box-shadow var(--t),border-color var(--t);
}
.bk-devt:hover{box-shadow:var(--e2);border-color:var(--line-2);border-left-color:var(--live)}
.bk-devt:focus-visible{box-shadow:var(--focus)}
.bk-devt--off{border-color:var(--warn-line);border-left-color:var(--warn-bold)}
.bk-devt--off:hover{border-color:var(--warn-line);border-left-color:var(--warn-bold)}
.bk-devt__t{flex:none;font-size:var(--fs-fine);font-weight:600;color:var(--muted)}
.bk-devt b{font-size:var(--fs-sm);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-devt__c{flex:1;font-size:var(--fs-btn);font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bk-devt__flag{flex:none}
.bk-devt__p{flex:none;font-size:var(--fs-btn);font-weight:700}

/* --- detail popover ---------------------------------------------------------- */
.bk-pop{
  position:absolute;z-index:20;width:292px;padding:var(--sp-16);overflow:auto;
  border-radius:var(--r-xl);box-shadow:var(--e3);
  animation:bk-pop-in .16s cubic-bezier(.2,0,0,1);
}
@keyframes bk-pop-in{from{opacity:0;transform:translateY(4px) scale(.98)}}
.bk-pop__top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-10);margin-bottom:var(--sp-10)}
.bk-pop__svc{font-size:var(--fs-base);font-weight:700;letter-spacing:-.01em}
.bk-pop__meta{flex:none;font-size:var(--fs-fine);font-weight:600;color:var(--muted)}
.bk-pop__rows{display:flex;flex-direction:column}
.bk-pop__row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);
  padding:var(--sp-8) 0;border-top:1px solid var(--line);font-size:var(--fs-btn);
}
.bk-pop__row > span:first-child{font-weight:500;color:var(--muted-2)}
.bk-pop__row > b{font-weight:600;text-align:right}
.bk-pop__link{
  display:inline-flex;align-items:center;gap:var(--sp-4);margin-left:auto;
  font-size:var(--fs-btn);font-weight:600;color:var(--ink);
  transition:opacity var(--t);
}
.bk-pop__link:hover{opacity:.65}
.bk-pop__link .sh-ic{width:13px;height:13px;color:var(--muted-2)}
.bk-pop__note{
  padding:var(--sp-8) 0 var(--sp-2);border-top:1px solid var(--line);
  font-size:var(--fs-fine);font-weight:500;color:var(--muted);line-height:1.5;
}
.bk-pop__warn{padding:var(--sp-8) 0 var(--sp-2);border-top:1px solid var(--line)}
.bk-pop__acts{display:flex;gap:var(--sp-8);margin-top:var(--sp-12);padding-top:var(--sp-12);border-top:1px solid var(--line)}
.bk-pop__acts .btn{flex:1}

/* --- booking modal form ------------------------------------------------------ */
.bk-form{display:flex;flex-direction:column;gap:var(--sp-14);margin-top:var(--sp-16)}
.bk-form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12)}
.bk-f-price{min-height:15px}

/* --- the two cards below the calendar ---------------------------------------- */
.bk-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-grid);margin-top:var(--sp-grid);align-items:start}
.bk-two > *{min-width:0}
.bk-cardhead{margin-bottom:var(--sp-14)}
.bk-cardhead h3{letter-spacing:-.01em}
.bk-cardhead .hint{margin-top:var(--sp-4)}

/* opening-hours editor */
.bk-hlist{display:flex;flex-direction:column}
.bk-hrow{
  display:flex;align-items:center;gap:var(--sp-14);
  min-height:50px;padding:var(--sp-4) 0;border-top:1px solid var(--line);
}
.bk-hrow__day{flex:1;font-size:var(--fs-row);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-hrow__io{display:flex;align-items:center;gap:var(--sp-8)}
.bk-hrow__io input[type="time"]{width:96px;height:var(--ctl-h-sm);padding:0 var(--sp-10);font-size:var(--fs-sm)}
.bk-hrow__sep{color:var(--muted-2);font-weight:600}
/* 206px = the exact width of .bk-hrow__io, so "closed" lands where the times were */
.bk-hrow__off{display:none;font-size:var(--fs-btn);font-weight:600;color:var(--muted-2);width:206px;text-align:right}
.bk-hrow.is-off .bk-hrow__io{display:none}
.bk-hrow.is-off .bk-hrow__off{display:block}
.bk-hrow.is-off .bk-hrow__day{color:var(--muted)}

/* Google Calendar card — same integration, same wording as Channels */
.bk-gcal__head{display:flex;align-items:center;gap:var(--sp-12)}
.bk-gcal__id{min-width:0}
.bk-gcal__acct{
  display:block;margin-top:var(--sp-2);font-size:var(--fs-fine);font-weight:600;color:var(--muted-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bk-gcal__foot{display:flex;align-items:center;gap:var(--sp-10);flex-wrap:wrap;margin-top:var(--sp-16)}

/* mock Google consent — one account row, click to continue */
.bk-mbody{margin-top:var(--sp-4)}
.bk-mnote{margin-top:var(--sp-12)}
.bk-acct{
  display:flex;align-items:center;gap:var(--sp-12);width:100%;text-align:left;
  padding:var(--sp-10) var(--sp-14);border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:var(--card);transition:border-color var(--t),background var(--t);
}
.bk-acct:hover{border-color:var(--ink)}
.bk-acct:focus-visible{box-shadow:var(--focus)}
.bk-acct__t{flex:1;min-width:0;display:flex;flex-direction:column}
.bk-acct__t b{font-size:var(--fs-sm);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-acct__t span{font-size:var(--fs-fine);font-weight:500;color:var(--muted-2)}
.bk-acct .sh-ic{flex:none;width:16px;height:16px;color:var(--muted-2)}

/* --- mobile -------------------------------------------------------------------- */
@media (max-width:880px){
  .bk-toolbar{gap:var(--sp-10);padding:var(--sp-12) var(--sp-14)}
  .bk-range{order:3;flex-basis:100%;margin-left:0;font-size:var(--fs-btn)}
  .bk-nav{margin-left:auto}
  .bk-two{grid-template-columns:1fr}
  .bk-day{padding:var(--sp-4) var(--sp-14) var(--sp-14)}
  .bk-devt{flex-wrap:wrap;gap:var(--sp-6) var(--sp-12)}
  .bk-devt__c{flex-basis:100%;order:4}
  .bk-devt__flag{order:5}
  .bk-hrow{gap:var(--sp-10)}
  .bk-hrow__io input[type="time"]{width:88px}
  .bk-hrow__off{width:auto}
  .bk-pop{width:min(272px,78vw)}
}