/* Rehab alert board, laid out like the existing DAKboard rehab screen:
   two alert bars on top, then Active Appointment and Next Appointment panels.
   VSC colours with Plus Jakarta Sans. */
.rkb {
  --o: #ed9b2d; --t: #b7a9a0; --ink: #393a3c; --paper: #fbfdfc; --panel: #4a4b4d;
  position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; gap: calc(12px + 2pt); padding: calc(8px + 2pt);
  background: var(--paper); color: var(--ink);
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.rkb *, .rkb *::before, .rkb *::after { box-sizing: border-box; }

/* Alert bars */
.rkb-btns { display: grid; grid-template-columns: 1fr 1fr; gap: calc(14px + 2pt); }
.rkb-btn {
  position: relative; height: 104px; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--t); color: var(--ink); font: inherit;
  display: flex; align-items: center; justify-content: center; gap: 18px;
}
.rkb-btn strong { font-size: 44px; font-weight: 700; letter-spacing: .01em; }
.rkb-btn .rkb-count {
  display: none; min-width: 56px; height: 56px; padding: 0 14px; border-radius: 28px; place-items: center;
  font-size: 30px; font-weight: 700; background: var(--paper); color: var(--ink); border: 2px solid var(--ink);
}
.rkb-btn.rkb-alert .rkb-count { display: grid; }
.rkb-btn.rkb-alert { animation: rkb-pulse 1.2s steps(1, end) infinite; }
@keyframes rkb-pulse {
  0%  { background: var(--o); color: var(--ink); }
  50% { background: var(--ink); color: var(--paper); }
}
.rkb-btn:active { transform: scale(.995); }

/* Panels */
/* White boxes with a dark grey header bar and a 3pt dark grey border */
.rkb-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 6px; background: #fff; color: var(--ink); border: 3pt solid var(--panel); overflow: hidden; }
.rkb-panel.rkb-active { flex: 1.8; }
.rkb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; background: var(--panel); color: var(--paper); padding: 12px 20px 14px; }
.rkb-head h2 { margin: 0; font-size: 34px; font-weight: 700; color: var(--paper); }
.rkb-head h2::after { content: ""; display: block; width: 28px; height: 3px; background: var(--o); margin-top: 6px; }
.rkb-head b { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rkb-rows { flex: 1; min-height: 0; overflow: auto; padding: calc(14px + 2pt) 20px; display: flex; flex-direction: column; gap: calc(12px + 2pt); }
.rkb-none { font-size: 34px; margin: 4px 0 0; }

.rkb-row { display: grid; grid-template-columns: minmax(150px, auto) 1fr auto; align-items: center; gap: 8px 28px; padding: 14px 18px; border-radius: 6px; background: #f3efec; }
.rkb-time { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rkb-time small { display: block; font-size: 18px; font-weight: 400; opacity: .85; }
.rkb-who b { display: block; font-size: 40px; font-weight: 700; line-height: 1.1; }
.rkb-who span { font-size: 22px; }
.rkb-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 520px; }
.rkb-tag { padding: 6px 14px; border-radius: 999px; font-size: 18px; font-weight: 700; background: #fff; color: var(--ink); border: 2px solid var(--t); }
.rkb-tag.rkb-here { background: var(--o); color: var(--ink); border-color: var(--o); }
.rkb-tag.rkb-away { background: transparent; color: var(--ink); border: 2px dashed var(--t); }
.rkb-tag.rkb-warn { background: var(--t); color: var(--ink); border-color: var(--t); }
.rkb-next .rkb-row { background: #fff; border: 2px solid var(--t); }
.rkb-next .rkb-who b { font-size: 32px; }

/* Questionnaire alerts on active appointments */
.rkb-qs { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.rkb-q { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 16px; border-radius: 6px; background: #fff; border: 2px solid var(--o); border-left-width: 10px; font-size: 22px; }
.rkb-q b { font-weight: 700; }
.rkb-q b::after { content: ":"; }
.rkb-q span { font-weight: 400; }
.rkb-q.rkb-q-info { border-color: var(--t); }
.rkb-q.rkb-q-info b::after, .rkb-q-ok b::after { content: ""; }
.rkb-q.rkb-q-ok { border-color: var(--t); font-weight: 600; }
.rkb-q.rkb-q-none { border: 2px dashed var(--t); font-weight: 600; }

/* Start overlay and connection banner */
.rkb-start { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(251,253,252,.96); z-index: 2; text-align: center; }
.rkb-start button { min-height: 120px; padding: 24px 48px; border-radius: 18px; border: 0; background: var(--o); color: var(--ink); font: inherit; font-size: 32px; font-weight: 700; cursor: pointer; }
.rkb-start p { font-size: 18px; margin: 18px 0 0; }
.rkb-err { display: none; padding: 10px 16px; border-radius: 6px; background: var(--t); font-weight: 700; font-size: 18px; }
.rkb-err.rkb-on { display: block; }

@media (max-width: 900px) {
  .rkb-btn strong { font-size: 28px; } .rkb-btn { height: 80px; }
  .rkb-row { grid-template-columns: 1fr; } .rkb-tags { justify-content: flex-start; }
  .rkb-who b { font-size: 28px; } .rkb-head h2 { font-size: 26px; }
}