/* DSMS — Digital Signage Management Services
   Netflix red / tricorn black / bright white */
:root {
  --red: #E50914;
  --red-dim: #b0060f;
  --black: #0b0b0a;
  --panel: #1a1a18;
  --tricorn: #2b2b28;
  --white: #ffffff;
  --gray: #9a9a95;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--black);
  color: var(--white);
  font-family: 'Segoe UI', Arial, sans-serif;
  overflow: hidden;
}

.app {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  width: 100vw;
}

/* ---------- HEADER ---------- */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2vh 2vw;
  background: linear-gradient(180deg, var(--tricorn) 0%, var(--black) 100%);
  border-bottom: 3px solid var(--red);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.6vw;
}

.brand .mark {
  color: var(--red);
  font-weight: 900;
  font-size: 2.4vw;
  letter-spacing: 0.05em;
}

.brand .sub {
  color: var(--white);
  font-size: 1vw;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.85;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1.5vw;
}

.coming-soon-badge {
  background: var(--red);
  color: var(--white);
  font-weight: 800;
  font-size: 1vw;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.5vh 1vw;
  border-radius: 3px;
}

.clock {
  font-size: 1.1vw;
  color: var(--white);
  opacity: 0.9;
  min-width: 9vw;
  text-align: right;
}

.fullscreen-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  color: var(--white);
  font-size: 1.1vw;
  line-height: 1;
  padding: 0.6vh 0.8vw;
  border-radius: 3px;
  cursor: pointer;
}

.fullscreen-btn:hover {
  border-color: var(--red);
  color: var(--red);
}

/* ---------- MAIN SPLIT ---------- */
.main {
  display: grid;
  grid-template-columns: 62% 38%;
  min-height: 0;
}

/* LEFT: video + clippings */
.left {
  display: grid;
  grid-template-rows: 68% 32%;
  min-height: 0;
  border-right: 3px solid var(--red);
  background: var(--black);
}

.video-wrap {
  position: relative;
  background: #000;
  min-height: 0;
}

.video-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-label {
  position: absolute;
  top: 1vh;
  left: 1vw;
  background: rgba(229, 9, 20, 0.9);
  color: var(--white);
  font-size: 0.9vw;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.4vh 0.8vw;
  border-radius: 3px;
  z-index: 2;
}

.clippings {
  position: relative;
  overflow: hidden;
  background: var(--tricorn);
  padding: 1.2vh 1.5vw;
  min-height: 0;
}

.clippings-heading {
  font-size: 0.85vw;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--red);
  font-weight: 800;
  margin-bottom: 0.8vh;
}

.clip-card {
  position: absolute;
  inset: 3.2vh 1.5vw 1.2vh 1.5vw;
  background: var(--panel);
  border-left: 4px solid var(--red);
  padding: 1.2vh 1.2vw;
  opacity: 0;
  transform: translateY(1.5vh) rotate(-0.4deg);
  transition: opacity 0.6s ease, transform 0.6s ease;
  border-radius: 2px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}

.clip-card.active {
  opacity: 1;
  transform: translateY(0) rotate(-0.4deg);
}

.clip-source {
  font-size: 0.75vw;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 0.5vh;
}

.clip-title {
  font-size: 1.15vw;
  line-height: 1.35;
  color: var(--white);
  font-weight: 600;
}

/* RIGHT: weather */
.right {
  display: grid;
  grid-template-rows: auto auto 1fr;
  background: var(--tricorn);
  min-height: 0;
  padding: 1.5vh 1.5vw;
  gap: 1.2vh;
}

.weather-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid rgba(229,9,20,0.5);
  padding-bottom: 1.5vh;
  margin-bottom: 1.5vh;
}

.wc-left .wc-location {
  font-size: 1vw;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray);
  margin-bottom: 0.4vh;
}

.wc-left .wc-temp {
  font-size: 4.2vw;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
}

.wc-left .wc-desc {
  font-size: 1.1vw;
  color: var(--white);
  opacity: 0.9;
  margin-top: 0.5vh;
}

.wc-icon {
  font-size: 5vw;
  line-height: 1;
}

.forecast-heading {
  font-size: 0.85vw;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--red);
  font-weight: 800;
  margin-bottom: 1vh;
}

.forecast-days {
  display: flex;
  flex-direction: column;
  gap: 0.9vh;
  min-height: 0;
  overflow: hidden;
}

.f-day {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel);
  border-radius: 4px;
  padding: 1vh 1vw;
}

.f-day .f-name {
  font-size: 1vw;
  font-weight: 700;
  color: var(--white);
  width: 22%;
}

.f-day .f-icon {
  font-size: 1.6vw;
  width: 15%;
  text-align: center;
}

.f-day .f-temps {
  font-size: 1vw;
  width: 30%;
  text-align: right;
}

.f-day .f-hi { color: var(--white); font-weight: 700; }
.f-day .f-lo { color: var(--gray); margin-left: 0.5vw; }

.radar-block {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.radar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6vh 0.8vw;
  margin-bottom: 0.8vh;
}

.radar-location-label {
  color: var(--gray);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 0.8vw;
  margin-left: 0.4vw;
}

.radar-search {
  display: flex;
  gap: 0.4vw;
}

.radar-search input {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  font-size: 0.85vw;
  padding: 0.5vh 0.7vw;
  border-radius: 3px;
  width: 9vw;
}

.radar-search input::placeholder {
  color: var(--gray);
}

.radar-search button {
  font-size: 0.8vw;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.5vh 0.8vw;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}

.radar-search #radar-search-btn {
  background: var(--red);
  color: var(--white);
  border: none;
}

.radar-search #radar-search-btn:hover {
  background: var(--red-dim);
}

.radar-search #radar-reset-btn {
  background: transparent;
  color: var(--gray);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.radar-search #radar-reset-btn:hover {
  color: var(--white);
  border-color: var(--white);
}

.radar-map {
  flex: 1;
  min-height: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #0b0b0a;
}

.radar-map .leaflet-control-attribution {
  font-size: 0.55vw;
  background: rgba(0, 0, 0, 0.5);
  color: var(--gray);
}

.radar-map .leaflet-control-attribution a {
  color: var(--gray);
}

/* ---------- TICKER ---------- */
.ticker-bar {
  display: flex;
  align-items: stretch;
  background: var(--black);
  border-top: 3px solid var(--red);
  height: 8.5vh;
  overflow: hidden;
}

.ticker-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: var(--white);
  font-weight: 900;
  font-size: 1.5vw;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 1.8vw;
  white-space: nowrap;
}

.ticker-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

.ticker-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
  animation-name: ticker-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 90s; /* overridden per-content in JS for a constant scroll speed */
  animation-play-state: paused; /* JS starts it once duration is computed, to avoid a start-of-scroll jump */
  padding-left: 100%;
}

.ticker-track span {
  font-size: 1.6vw;
  color: var(--white);
  margin-right: 4.5vw;
  font-weight: 500;
}

.ticker-track span::before {
  content: "\25CF";
  color: var(--red);
  margin-right: 0.9vw;
  font-size: 0.9vw;
  vertical-align: middle;
}

.ticker-footer {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 0.85vw;
  color: var(--gray);
  padding: 0 1.2vw;
  border-left: 2px solid rgba(255, 255, 255, 0.15);
}

@keyframes ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

@media (max-width: 900px) {
  .main { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .left { border-right: none; border-bottom: 3px solid var(--red); }
  .brand .mark { font-size: 5vw; }
  .brand .sub { font-size: 2.2vw; }
  .wc-left .wc-temp { font-size: 10vw; }
}