/* The web platform's own styles (arx-free 1.11.0, Phase 2d; the booking pages 1.18.0) - on top of the kiosk's tokens.css / app.css, which make the
   kiosk's blocks (the report, the coach, the history) look here as they do there. The web is used on a phone or a desktop,
   not on a 1920 px kiosk screen: the page scrolls, the header wraps, the footer holds the way back and one action. */

html, body { height: auto; min-height: 100%; overflow-y: auto; }
body { display: flex; flex-direction: column; }
.screen { flex: 1 1 auto; overflow: visible; padding: 16px; max-width: 1100px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.header { position: sticky; top: 0; z-index: 5; flex-wrap: wrap; row-gap: 6px; }
.header .left, .header .right { flex-wrap: wrap; }
.footer { position: sticky; bottom: 0; z-index: 5; }
.web-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; }
.web-nav a { display: inline-block; padding: 10px 14px; border-radius: 12px; background: var(--panel, #fff); color: inherit; text-decoration: none; border: 1px solid var(--line, #ddd); font-weight: 600; }
.web-nav a.current { background: var(--headline, #1f5f8b); color: #fff; border-color: var(--headline, #1f5f8b); }
.web-card { background: var(--panel, #fff); border: 1px solid var(--line, #ddd); border-radius: 14px; padding: 16px; margin-bottom: 16px; }
.web-card h2 { margin: 0 0 10px; font-size: 1.2rem; }
.web-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.web-photo { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; background: #dfe4e4; }
.web-form { display: grid; gap: 12px; max-width: 480px; }
.web-form label { display: grid; gap: 4px; font-weight: 600; }
.web-form input, .web-form select, .web-form textarea { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line, #ccc); }
.web-form label.row { display: flex; align-items: center; gap: 10px; font-weight: 500; }   /* a checkbox next to its words */
.web-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.web-table th, .web-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line, #e3e3e3); vertical-align: top; }
.web-table tr.clickable { cursor: pointer; }
.web-login { max-width: 420px; margin: 40px auto; }
.web-login .brand-hero { justify-content: center; }
.web-muted { color: var(--muted, #667); }
.web-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.1rem; letter-spacing: 0.06em; word-break: break-all; }
.web-qr { width: 220px; height: 220px; image-rendering: pixelated; }
.web-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.85rem; background: #e8eef3; }
.web-badge.warn { background: #fde7c3; }
.web-badge.danger { background: #f7d4d4; }
.web-badge.ok { background: #d8f0dc; }
.web-scroll { overflow-x: auto; }
.web-list { list-style: none; margin: 0; padding: 0; }
.web-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--line, #e3e3e3); }
.web-list li:last-child { border-bottom: 0; }

/* B1 (1.18.0) - the booking pages: the day chips, the board (a row per block, a column per machine; the buttons in the kiosk's
   colour rule: free = green, taken = red, blocked / closed = grey, mine = the headline blue), the sheet of a tapped block at
   the bottom of the phone (a card in the middle on a desktop), the opening-hours rows of the site page. */
.book-days { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: thin; }
.book-days .chip { flex: none; min-height: 44px; padding: 0 14px; font-size: 0.95rem; }
.book-board { display: grid; grid-template-columns: 58px repeat(var(--machines, 1), minmax(0, 1fr)); gap: 4px; align-items: stretch; }
.book-head { font-weight: 700; text-align: center; padding: 6px 0; min-height: 34px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-time { height: 38px; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; font-size: 0.85rem; color: var(--ink-2, #4a4d52); }
.book-time.slim { height: 16px; font-size: 0.7rem; color: var(--ink-3, #85878a); }
.block { height: 38px; border-radius: 8px; border: 0; font: inherit; font-size: 0.85rem; font-weight: 650; color: #fff; cursor: pointer; padding: 0 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; }
.block.slim { height: 16px; font-size: 0; }
.block.free { background: var(--go, #1e8449); }
.block.taken { background: var(--danger, #c4302b); }
.block.mine { background: var(--headline, #2b62c2); }
.block.blocked { background: var(--ink-3, #85878a); }
.block.closed { background: var(--surface-2, #ebe7dd); color: var(--ink-3, #85878a); cursor: default; }
.block:disabled { cursor: default; }
.block:not(:disabled):active { transform: scale(.97); }
.web-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface, #fff); color: var(--ink, #16181b); border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .28);
  max-height: 80vh; overflow-y: auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 12px; }
.web-sheet h2 { margin: 0; font-size: 1.1rem; }
.web-sheet .sizes { display: flex; gap: 8px; }
.web-sheet .sizes .chip.on { background: var(--headline, #2b62c2); border-color: var(--headline, #2b62c2); color: #fff; }
.web-sheet .field { max-width: 480px; }
@media (min-width: 720px) {
  .web-sheet { left: 50%; right: auto; bottom: 24px; width: 540px; transform: translateX(-50%); border-radius: 18px; }
}
.opening-row .weekday { min-width: 110px; }
.opening-row .input[type="time"] { min-height: 44px; padding: 0 10px; }
.opening-row select.input { min-height: 44px; padding: 0 10px; }
@media (max-width: 640px) {
  .screen { padding: 10px; }
  .header .hbtn { font-size: 0.9rem; padding: 6px 8px; }
  .book-board { grid-template-columns: 50px repeat(var(--machines, 1), minmax(0, 1fr)); }
  .web-sheet .btn { min-height: 56px; }
}