/* Gold Choice Booking — styles for the board screens (owned by that part of the app). Old-phone rules as app.css: no grid gap, literal colours. */
/* Two screens live here: the waiting-room board (.bd-*) and Reports (.rp-*). A literal colour
   comes before each var() so a browser without custom properties still gets a styled page. */

/* ================================================================ waiting-room board */
.daynav h1 small a { color: inherit; }
.bd-filter { margin-bottom: .6rem; }
.bd-tiles .tile { -webkit-flex-basis: 110px; flex-basis: 110px; }
@media (max-width: 600px) {
  /* on a phone the numbers stay small so the people come first */
  .bd-tiles .tile { -webkit-flex-basis: 28%; flex-basis: 28%; padding: .45rem .55rem; margin: .25rem; }
  .bd-tiles .tile b { font-size: 1.1rem; }
  .bd-tiles .tile span { font-size: .75rem; line-height: 1.25; display: block; }
}
.bd-tile-warn { background: #fff4d9 !important; }
.bd-tile-warn b { color: #7a5410; }
.bd-tile-alert { background: #fbe8e8 !important; }
.bd-tile-alert b { color: #a12c2c; }
.bd-offline { background: #fff4d9; color: #7a5410; border-radius: 10px; padding: .55rem .8rem; margin: 0 0 .8rem; font-size: .92rem; }

/* columns: stacked on a phone (who is here first), side by side on a wide screen */
.bd-cols { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
.bd-col { margin-bottom: 1rem; min-width: 0; }
.bd-col-arrived { -webkit-order: 1; order: 1; }
.bd-col-chair { -webkit-order: 2; order: 2; }
.bd-col-started { -webkit-order: 3; order: 3; }
.bd-col-expected { -webkit-order: 4; order: 4; }
.bd-col-done { -webkit-order: 5; order: 5; }
.bd-col h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: #6f6470; color: var(--muted); margin: .2rem 0 .5rem;
  padding-bottom: .35rem; border-bottom: 2px solid #e7e0e4; border-bottom: 2px solid var(--line); }
.bd-count { display: inline-block; min-width: 1.6em; text-align: center; background: #eeeaec; color: #241c22; border-radius: 999px; padding: 0 .45rem; margin-left: .25rem; font-size: .8rem; letter-spacing: 0; }
.bd-col-arrived .bd-count { background: #efe6fb; color: #5a2d91; }
.bd-empty { color: #6f6470; color: var(--muted); font-size: .9rem; margin: .2rem 0 .6rem; }
.bd-more { font-size: .85rem; margin: .2rem 0; }
@media (min-width: 900px) {
  .bd-cols { -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start; margin: 0 -.35rem; }
  .bd-col { -webkit-flex: 1 1 0; flex: 1 1 0; margin: 0 .35rem 1rem; -webkit-order: 0; order: 0; }
  /* the board wants more width (only the board page: older browsers without :has keep 1100px) */
  body.app .main:has(.bd-cols) { max-width: 1500px; }
}

.bd-list { list-style: none; margin: 0; padding: 0; }
.bd-card { background: #fff; background: var(--card); border: 1px solid #e7e0e4; border: 1px solid var(--line); border-left: 5px solid #b04a6f; border-radius: 12px; margin-bottom: .55rem; }
.bd-card.bd-warn { background: #fff8e6; border-color: #f0d48a; }
.bd-card.bd-alert { background: #fdeeee; border-color: #eaa9a9; }
.bd-item { display: block; padding: .6rem .7rem .5rem; text-decoration: none; color: #241c22; color: var(--ink); }
.bd-top { display: block; margin-bottom: .1rem; }
.bd-time { font-weight: 700; margin-right: .2rem; }
.bd-name { display: block; font-size: 1.02rem; line-height: 1.3; overflow-wrap: break-word; word-wrap: break-word; }
.bd-svc, .bd-meta, .bd-sub { display: block; font-size: .87rem; line-height: 1.35; }
.bd-meta, .bd-sub { color: #6f6470; color: var(--muted); }
.bd-card.bd-warn .bd-meta, .bd-card.bd-warn .bd-sub, .bd-card.bd-alert .bd-meta, .bd-card.bd-alert .bd-sub { color: #5a4f58; }
.bd-pill { display: inline-block; font-size: .78rem; font-weight: 600; padding: .08rem .5rem; border-radius: 999px; background: #e7f0f9; color: #23507a; white-space: nowrap; vertical-align: 1px; }
.bd-pill-warn { background: #ffe7a8; color: #6b4708; }
.bd-pill-alert { background: #a12c2c; color: #fff; }
.bd-pill-req { background: #fff4d9; color: #7a5410; }
.bd-pill-muted { background: #eeeaec; color: #6f6470; }
.bd-pill-done { background: #e6f3e8; color: #2f6b3a; }
.bd-pill-no { background: #fbe8e8; color: #a12c2c; }
.bd-act { padding: 0 .7rem .6rem; }
.bd-act form { display: inline-block; margin: 0 .3rem .3rem 0; }
.bd-act .btn-sm { min-height: 40px; }

/* ---- full screen for a front-desk TV: dark, big type, no menus, no buttons ----
   Sizes are in em so the whole board grows with the screen (see the media queries below). */
body.site .bd-tv { background: #1f1823; color: #fff; min-height: 100vh; padding: 1rem 1.2rem 1.5rem; font-size: 18px; line-height: 1.35; }
.bd-tv-top { display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: .6em; }
.bd-tv-name { font-weight: 800; font-size: 1.5em; margin-right: .8em; }
.bd-tv-when { color: #d9cfd5; font-size: 1.1em; -webkit-flex: 1; flex: 1; }
.bd-tv-exit { color: #9d8f99; font-size: .75em; }
.bd-tv .bd-offline { background: #5c4410; color: #fff; font-size: .9em; }
.bd-tv-stats { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -.35em .9em; }
.bd-tv-stat { -webkit-flex: 1 1 8em; flex: 1 1 8em; margin: .35em; background: #2e2433; border-radius: 12px; padding: .55em .85em; }
.bd-tv-stat b { display: block; font-size: 1.9em; line-height: 1.15; }
.bd-tv-stat span { color: #d9cfd5; font-size: .9em; }
.bd-tv-stat.bd-tile-warn { background: #6b4708 !important; }
.bd-tv-stat.bd-tile-alert { background: #8f2424 !important; }
.bd-tv-stat.bd-tile-warn b, .bd-tv-stat.bd-tile-alert b { color: #fff; }
.bd-cols-tv { -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start; margin: 0 -.35em; }
.bd-cols-tv .bd-col { -webkit-flex: 1 1 0; flex: 1 1 0; margin: 0 .35em; -webkit-order: 0; order: 0; }
.bd-cols-tv .bd-col h2 { color: #d9cfd5; border-bottom-color: #4a3d50; font-size: .9em; }
.bd-cols-tv .bd-count { background: #4a3d50; color: #fff; font-size: .95em; }
.bd-cols-tv .bd-empty, .bd-cols-tv .bd-more { color: #9d8f99; font-size: .95em; }
.bd-cols-tv .bd-card { background: #2e2433; border-color: #3e3243; margin-bottom: .45em; }
.bd-cols-tv .bd-card.bd-warn { background: #5c4410; border-color: #8a6a1c; }
.bd-cols-tv .bd-card.bd-alert { background: #7a2020; border-color: #a83a3a; }
.bd-cols-tv .bd-item { color: #fff; padding: .55em .7em; }
.bd-cols-tv .bd-time { font-size: 1em; }
.bd-cols-tv .bd-name { font-size: 1.35em; }
.bd-cols-tv .bd-svc { font-size: .95em; }
.bd-cols-tv .bd-meta, .bd-cols-tv .bd-sub,
.bd-cols-tv .bd-card.bd-warn .bd-meta, .bd-cols-tv .bd-card.bd-warn .bd-sub,
.bd-cols-tv .bd-card.bd-alert .bd-meta, .bd-cols-tv .bd-card.bd-alert .bd-sub { color: #e6dbe2; font-size: .85em; }
.bd-cols-tv .bd-pill { font-size: .85em; }
/* bigger screens, bigger type: a 1080p TV, then a 4K one */
@media (min-width: 1600px) { body.site .bd-tv { font-size: 24px; } }
@media (min-width: 2400px) { body.site .bd-tv { font-size: 34px; } }
/* a narrow TV browser or a phone opened in full screen: still readable, two columns per row */
@media (max-width: 760px) {
  body.site .bd-tv { font-size: 16px; padding: .8rem; }
  .bd-cols-tv { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
  .bd-cols-tv .bd-col { -webkit-flex: 1 1 45%; flex: 1 1 45%; margin-bottom: 1em; }
}

/* ================================================================ reports */
.rp-tiles .tile { -webkit-flex-basis: 120px; flex-basis: 120px; }
.rp-tiles .tile b { font-size: 1.3rem; }
@media (max-width: 600px) {
  .rp-tiles .tile { -webkit-flex-basis: 28%; flex-basis: 28%; padding: .5rem .6rem; margin: .25rem; }
  .rp-tiles .tile b { font-size: 1.1rem; }
  .rp-tiles .tile span { font-size: .75rem; line-height: 1.25; display: block; }
}
.rp-jump { margin-bottom: 1rem; }
.rp-facts > li { padding: .55rem 0; }
.rp-facts b { font-size: 1.05rem; }

/* bars: label | bar | value */
.rp-bars td { vertical-align: middle; }
.rp-bars td:first-child { width: 38%; }
.rp-barcell { width: 40%; }
.rp-bar { height: 12px; background: #f0eaee; border-radius: 999px; overflow: hidden; min-width: 60px; }
.rp-bar span { display: block; height: 12px; background: #b04a6f; background: var(--accent); border-radius: 999px; }
.rp-red .rp-bar span { background: #c24848; }
@media (max-width: 520px) {
  .rp-bars td:first-child { width: auto; }
  .rp-barcell { width: 30%; }
}

/* busy-hours heatmap: hours down, weekdays across */
.rp-heat { border-collapse: separate; border-spacing: 3px; margin: 0 auto .4rem 0; }
.rp-heat th { font-size: .78rem; font-weight: 600; color: #6f6470; color: var(--muted); padding: .1rem .35rem; white-space: nowrap; }
.rp-heat thead th { text-align: center; }
.rp-heat tbody th { text-align: right; }
.rp-heat td { width: 3.1rem; min-width: 2.4rem; height: 1.9rem; text-align: center; font-size: .8rem; font-weight: 600; border-radius: 6px; background: #faf7f8; color: #241c22; }
@media (min-width: 700px) { .rp-heat td { width: 4.2rem; } }