/*
 * Prime Dashboard TV tuning
 * Target: 50-inch Insignia display used at Surfside Beach.
 *
 * IMPORTANT: the dashboard template uses fixed-position panels. Keep every
 * panel on one shared geometry model so the top and bottom cards never
 * overlap. The ticker owns a separate row below the cards.
 */

:root {
  --tv-header-height: 92px;
  --tv-ticker-height: 56px;
  --tv-ticker-gap: 10px;
  --tv-bottom-safe: 10px;
  --tv-board-top: calc(var(--tv-header-height) + var(--main-pad-y));
  --tv-board-bottom: calc(var(--tv-bottom-safe) + var(--tv-ticker-height) + var(--tv-ticker-gap));
  --tv-board-height: calc(100vh - var(--tv-board-top) - var(--tv-board-bottom));
  --tv-top-card-height: calc((var(--tv-board-height) - var(--board-gap)) * .60);
  --tv-bottom-card-height: calc((var(--tv-board-height) - var(--board-gap)) * .40);
}

/* Dedicated ticker row below every card. */
body.tv .ticker-bar,
body.tv.compact .ticker-bar {
  position: fixed !important;
  left: var(--main-pad-x) !important;
  right: var(--main-pad-x) !important;
  bottom: var(--tv-bottom-safe) !important;
  width: auto !important;
  height: var(--tv-ticker-height) !important;
  min-height: var(--tv-ticker-height) !important;
  margin: 0 !important;
  border-radius: 12px !important;
  z-index: 20 !important;
  overflow: hidden !important;
  font-size: clamp(20px, 1.65vw, 27px) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .12) !important;
}

body.tv .ticker-bar-inner,
body.tv.compact .ticker-bar-inner {
  min-height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

/* Top row. All three panels share the same top edge and calculated height. */
body.tv .area-weather,
body.tv .area-tides,
body.tv.compact .area-weather,
body.tv.compact .area-tides {
  top: var(--tv-board-top) !important;
  bottom: auto !important;
  height: var(--tv-top-card-height) !important;
}

/*
 * Showcase owns ONLY the center column. Explicit left/right edges keep it
 * from bleeding over Weather, Tides, or the lower side panels on TVs whose
 * browser reports a slightly different viewport width.
 */
body.tv .area-showcase,
body.tv.compact .area-showcase {
  left: calc(var(--main-pad-x) + var(--side-col) + var(--board-gap)) !important;
  right: calc(var(--main-pad-x) + var(--side-col) + var(--board-gap)) !important;
  width: auto !important;
  max-width: none !important;
  top: var(--tv-board-top) !important;
  bottom: var(--tv-board-bottom) !important;
  height: auto !important;
  overflow: hidden !important;
}

body.tv .area-showcase .card,
body.tv.compact .area-showcase .card {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

body.tv .area-showcase img,
body.tv.compact .area-showcase img {
  max-width: 100% !important;
}

/* Bottom row starts AFTER the top row. Do not anchor it independently to a
 * conflicting height calculation; that was causing Local Events / Trivia to
 * climb into Weather / Tides on the Insignia panel. */
body.tv .area-info,
body.tv .area-center,
body.tv .area-trivia,
body.tv.compact .area-info,
body.tv.compact .area-center,
body.tv.compact .area-trivia {
  top: calc(var(--tv-board-top) + var(--tv-top-card-height) + var(--board-gap)) !important;
  bottom: var(--tv-board-bottom) !important;
  height: auto !important;
}

/* TV/browser overscan protection. */
body.tv header,
body.tv.compact header {
  padding-left: max(28px, 1.5vw) !important;
  padding-right: max(28px, 1.5vw) !important;
}