/* Display rules ported 1:1 from the on-prem North Bay board (board_northbay.html V2.6.6.2).
   Sizes are vh/vw so the board scales with the screen; the fixed px offsets are the old kiosk's. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; max-height: 100%; background: #000; overflow: hidden; }
.board { background: #000; width: 100%; height: 100%; display: flex; flex-direction: column; padding: 0.5vh 0.5vw 0 2vw; font-family: sans-serif; overflow: hidden; }
.header { display: flex; align-items: center; background: #1e88e5; border-radius: 8px; padding: 1vh 1.5vw; position: relative; height: 8vh; flex-shrink: 0; }
.logo { max-height: 7vh; max-width: 15vw; object-fit: contain; border-radius: 6px; background: #ffffff; padding: 4px 10px; flex-shrink: 0; position: relative; z-index: 1; }
/* Until a logo is set (or when a store has none) show nothing, not an empty white chip. */
.logo:not([src]), .splash img.splash-logo:not([src]) { display: none; }
.store-name { position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; font-family: 'Tenor Sans', sans-serif; font-size: 4.5vh; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; white-space: nowrap; pointer-events: none; }
.content-area { flex: 1; position: relative; min-height: 0; max-height: calc(100vh - 219px); border: 1px solid #333; border-radius: 8px; overflow: hidden; }
.tbl-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; transition: opacity 1.2s ease; }
.tbl-wrap.hidden { opacity: 0; pointer-events: none; }
.tbl-head { flex-shrink: 0; background: #fff; border-bottom: 1px solid #ddd; display: flex; }
.tbl-head .th { font-size: 2.8vh; font-weight: 700; color: #000; text-transform: uppercase; letter-spacing: 0.08em; padding: 1.5vh 1.5vw; text-align: center; overflow: hidden; }
.tbl-body { flex: 1; display: flex; flex-direction: column; transition: opacity 0.5s ease; }
.tbl-body.fading { opacity: 0; }
.tbl-row { flex: 1; display: flex; align-items: center; border-bottom: 1px solid #222; }
.tbl-row:last-child { border-bottom: none; }
.tbl-cell { padding: 0 1.5vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 3.8vh; color: #fff; }
.bold { font-weight: 500; }
.splash { position: absolute; inset: 0; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vh; opacity: 0; pointer-events: none; transition: opacity 1.2s ease; }
.splash.visible { opacity: 1; }
.splash .splash-welcome { font-family: 'Tenor Sans', sans-serif; font-size: 6vh; font-weight: 400; color: #fff; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0; transform: translateY(-20px); transition: opacity 0.6s ease 0.8s, transform 0.6s ease 0.8s; }
.splash.visible .splash-welcome { opacity: 1; transform: translateY(0); }
.splash img.splash-logo { max-width: 70%; max-height: 35vh; object-fit: contain; border-radius: 16px; background: #ffffff; padding: 20px 40px; }
.splash .splash-name { font-family: 'Tenor Sans', sans-serif; font-size: 5vh; font-weight: 700; color: #fff; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease 1s, transform 0.6s ease 1s; }
.splash.visible .splash-name { opacity: 1; transform: translateY(0); }
.staff-slide { position: absolute; inset: 0; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1.5vh; opacity: 0; pointer-events: none; transition: opacity 1.2s ease; padding: 2vh 3vw 1vh; }
.staff-slide.visible { opacity: 1; }
.staff-slide .staff-title-label { font-family: 'Tenor Sans', sans-serif; font-size: 4vh; font-weight: 700; color: #fff; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; flex-shrink: 0; }
.staff-row { display: flex; gap: 2vw; align-items: flex-start; justify-content: center; width: 100%; }
.staff-row.managers { margin-bottom: 0.5vh; }
.staff-card { display: flex; flex-direction: column; align-items: center; gap: 0.8vh; }
.staff-card.manager { width: 15vw; }
.staff-card.advisor { width: 12vw; }
.staff-card img { width: 100%; object-fit: cover; object-position: center 30%; border-radius: 12px; border: 2px solid #444; }
.staff-card.manager img { height: 24vh; }
.staff-card.advisor img { height: 20vh; }
.staff-card .staff-name { font-family: 'Tenor Sans', sans-serif; font-size: 1.6vh; color: #fff; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.staff-card .staff-role { font-size: 1.3vh; color: #aaa; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.datetime-bar { display: flex; justify-content: space-between; align-items: center; padding: 0 0.5vw; height: 5vh; flex-shrink: 0; position: fixed; bottom: 58px; left: 0; right: 0; }
.datetime-center { flex: 1; display: flex; justify-content: center; align-items: center; gap: 1.5vw; }
.footer-text { font-size: 2.8vh; color: #fff; font-variant-numeric: tabular-nums; }
.page-indicator { font-size: 1.8vh; color: #aaa; flex-shrink: 0; min-width: 60px; text-align: right; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; display: inline-block; animation: pulse 2s infinite; flex-shrink: 0; margin-left: 8px; }
.powered-by { display: flex; align-items: center; flex-shrink: 0; }
.powered-by img { height: 3vh; width: auto; object-fit: contain; }
.ticker-wrap { background: #fff; overflow: hidden; white-space: nowrap; height: 3.5vh; display: flex; align-items: center; flex-shrink: 0; border-top: 1px solid #ccc; position: fixed; bottom: 20px; left: 0; right: 0; }
.ticker-track { display: inline-block; animation: ticker 18s linear infinite; }
.ticker-track span { font-size: 2.2vh; color: #000; font-weight: 700; letter-spacing: 0.04em; padding-right: 10vw; font-family: 'Tenor Sans', sans-serif; }
.ticker-static { display: none; position: absolute; left: 0; right: 0; text-align: center; font-size: 2.2vh; color: #000; font-weight: 700; letter-spacing: 0.06em; font-family: 'Tenor Sans', sans-serif; background: #fff; padding: 0 2vw; z-index: 2; }
.ticker-static.flashing { animation: tickerFlash var(--flash-speed, 0.8s) ease-in-out infinite; }
@keyframes tickerFlash { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.specials-slide { position: absolute; inset: 0; background: #000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 1.2s ease; overflow: hidden; }
.specials-slide.visible { opacity: 1; }
.specials-slide img { width: 100%; height: 100%; object-fit: contain; display: block; max-height: 100%; max-width: 100%; }
body.specials-active .datetime-bar { visibility: hidden; }
body.specials-active .ticker-wrap { visibility: hidden; }