/* Version 7 additions */
.rotationStatus {
  border-color: #fff;
  background: transparent;
  color: #fff;
}

.rotationStatus b {
  color: #fff;
}

.versionInfo {
  width: 100%;
  margin-top: 12px;
  padding-top: 13px;
  border-top: 1px solid #252728;
  color: #777;
  line-height: 1.25;
  text-align: center;
}

.versionInfo strong,
.versionInfo small {
  display: block;
}

.versionInfo strong {
  font-size: 7px;
  letter-spacing: .08em;
}

.versionInfo small {
  margin-top: 4px;
  font-size: 7px;
}

@media (max-width: 620px) {
  .versionInfo {
    display: none;
  }
}

/* Version 17: shared MULLET Timetable branding. */
:root {
  --bg: #101010;
  --panel: #191919;
  --line: #353535;
  --text: #f1f1f1;
  --muted: #8e8e8e;
  --gold: #b98b70;
  --green: #b98b70;
}

.shell {
  grid-template-columns: 220px 1fr;
  background: radial-gradient(circle at 88% 0, #34251e, transparent 30%), #101010;
}

.shell > aside {
  align-items: stretch;
  padding: 25px 18px;
  background: #080808;
  border-color: #303030;
}

.mulletLogo,
.loginBrand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.mulletLogo {
  padding: 0 8px 25px;
  border-bottom: 1px solid #303030;
}

.mulletLogo > i,
.loginBrand > i {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #704a35;
  color: #fff;
  font: 700 20px Georgia, serif;
  font-style: normal;
}

.mulletLogo > div,
.loginBrand > div {
  display: grid;
}

.mulletLogo b,
.loginBrand b {
  color: #fff;
  letter-spacing: .12em;
  font: 800 16px Georgia, serif;
}

.mulletLogo span,
.loginBrand span {
  margin-top: 2px;
  color: #aaa;
  font-size: 7px;
  letter-spacing: .2em;
}

.shell nav {
  margin-top: 27px;
}

.shell nav button {
  grid-template-columns: 25px 1fr;
  justify-items: start;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  color: #aaa;
}

.shell nav em {
  font-size: 17px;
}

.shell nav small {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
}

.shell nav button:hover,
.shell nav .active {
  background: #704a35;
  color: #fff;
}

.versionInfo {
  margin-top: auto;
  padding: 13px;
  text-align: left;
  border-color: #303030;
  color: #8d8d8d;
}

.panel,
.loginCard {
  background: #191919;
  border-color: #353535;
}

.loginScreen {
  background: radial-gradient(circle at 50% 20%, #34251e, transparent 38%), #080808;
}

.loginBrand {
  justify-content: center;
  margin-bottom: 24px;
  text-align: left;
}

.loginCard > label,
.work > header label,
.heading label,
.sticky > label {
  color: #b98b70;
}

.loginCard input:focus,
.field input:focus,
.slot input:focus,
.rotationControl input:focus {
  border-color: #855c43;
  box-shadow: 0 0 0 3px #704a3538;
}

.loginCard button,
.actions .primary,
.formActions .primary {
  background: #704a35;
  border-color: #704a35;
}

.heading button,
.actions button,
.formActions button,
.wide,
.templateStepper button {
  background: #222;
  border-color: #414141;
  color: #eee;
}

.templateStepper button:hover,
.presetGrid button:hover {
  border-color: #8b624a;
  color: #d0a98f;
}

.toggle.on {
  background: #704a35;
}

.rotationControl {
  background: #241b17;
  border-color: #4b3a31;
}

.rotationControl > div:first-child label,
.boardPicker > div:first-child span {
  color: #d0a98f;
}

.rotationControl button {
  background: #222;
  border-color: #494949;
}

/* Version 25: editable internal template names. */
.templateNameField {
  margin-bottom: 5px;
}

.templateNameNote,
.templateNameError {
  margin: 0 0 18px 90px;
  font-size: 9px;
  line-height: 1.45;
}

.templateNameNote {
  color: #777;
}

.templateNameError {
  color: #df746d;
  font-weight: bold;
}

/* Version 20: darker flip tiles; text colors stay unchanged. */
.boardRow span {
  background: linear-gradient(#0e0f0f 49%, #070808 50%);
  border-color: #080909;
}

.boardRow span::after {
  border-top-color: #010202;
}

/* Version 22: darker gaps and outlines for the brighter TV panel. */
.boardInner,
.display,
.display .board.full .boardInner {
  background: #010202;
}

/* Version 23: near-black tile separation specifically on the TV display. */
.display,
.display .board.full .boardInner {
  background: #000;
}

.display .boardRow span {
  border-color: #000;
}

.display .boardRow span::after {
  border-top-color: #000;
}

/* Version 21: staggered mechanical split-flap transition. */
.display .boardRow span.flipping {
  animation: split-flap-turn 180ms linear infinite;
  transform-origin: center 50%;
  will-change: transform, filter;
}

@keyframes split-flap-turn {
  0% { transform: perspective(420px) rotateX(0deg); filter: brightness(1); }
  46% { transform: perspective(420px) rotateX(-78deg); filter: brightness(.58); }
  54% { transform: perspective(420px) rotateX(78deg); filter: brightness(.7); }
  100% { transform: perspective(420px) rotateX(0deg); filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .display .boardRow span.flipping { animation: none; }
}

.boardPicker button.selected {
  background: #30231d;
  border-color: #704a35;
  color: #d0a98f;
}

.boardPicker button.selected i {
  background: #704a35;
}

@media (max-width: 900px) {
  .shell {
    grid-template-columns: 72px 1fr;
  }

  .shell > aside {
    align-items: center;
    padding: 22px 9px;
  }

  .mulletLogo {
    justify-content: center;
    width: 100%;
    padding: 0 0 25px;
  }

  .mulletLogo > div,
  .shell nav small {
    display: none;
  }

  .shell nav button {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 11px 4px;
  }

  .versionInfo {
    padding: 12px 0 0;
    text-align: center;
  }
}

@media (max-width: 620px) {
  .templateNameNote,
  .templateNameError {
    margin-left: 0;
  }
}

@media (max-width: 620px) {
  .shell > aside {
    align-items: center;
    padding: 5px;
  }

  .mulletLogo {
    display: none;
  }

  .shell nav button {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    justify-items: center;
    padding: 6px;
  }

  .shell nav small {
    display: block;
    font-size: 8px;
  }
}

/* Version 8: the physical TV already provides the outer frame. */
.display .board {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.display .boardInner {
  border: 0;
}

/* Version 12: template navigation in the editor. */
.templateStepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -8px 0 18px;
  padding: 8px;
  border: 1px solid #2f3233;
  border-radius: 8px;
  background: #111314;
}

.templateStepper button {
  width: 42px;
  height: 34px;
  border: 1px solid #494c4d;
  border-radius: 6px;
  background: #1b1d1e;
  color: #fff;
  font-size: 18px;
}

.templateStepper button:hover {
  border-color: #d89a31;
  color: #efb041;
}

.templateStepper span {
  flex: 1;
  min-width: 0;
  color: #92938f;
  font: 10px monospace;
  letter-spacing: .12em;
  text-align: center;
}

/* Version 13: 1920 × 1080 display filled edge-to-edge with tiles. */
.boardRow {
  grid-template-columns: repeat(23, 1fr);
}

.display {
  display: block;
  width: 100vw;
  height: 100vh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #080909;
}

.display .board.full {
  width: 100vw;
  height: 100vh;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.display .board.full .boardInner {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-rows: repeat(10, 1fr);
  gap: 3px;
}

.display .board.full .boardRow {
  min-height: 0;
  grid-template-columns: repeat(23, 1fr);
  gap: 3px;
}

.display .board.full .boardRow span {
  min-height: 0;
  aspect-ratio: auto;
  font-size: clamp(20px, 4.4vh, 48px);
}

/* Version 14: PIN gate for the complete admin area. */
.loginScreen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 20%, #282118, transparent 34%), #0b0c0d;
}

.loginCard {
  width: min(100%, 390px);
  padding: 36px;
  border: 1px solid #2c2f30;
  border-radius: 14px;
  background: linear-gradient(145deg, #1a1c1d, #121415);
  box-shadow: 0 24px 70px #0009;
  text-align: center;
}

.loginMark {
  width: 54px;
  height: 54px;
  margin: 0 auto 24px;
  display: grid;
  place-items: center;
  border: 1px solid #7b5724;
  border-radius: 11px;
  color: #efb041;
  font: 700 24px monospace;
}

.loginCard > label {
  color: #d89a31;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: .14em;
}

.loginCard h1 {
  margin: 9px 0 10px;
  font-size: 26px;
  letter-spacing: -.03em;
}

.loginMessage {
  margin: 0 0 22px;
  color: #92938f;
  font-size: 12px;
}

.loginCard input {
  width: 100%;
  padding: 15px;
  border: 1px solid #3a3d3e;
  border-radius: 8px;
  outline: none;
  background: #0c0e0f;
  color: #fff;
  font: 24px monospace;
  letter-spacing: .55em;
  text-align: center;
}

.loginCard input:focus {
  border-color: #d89a31;
  box-shadow: 0 0 0 3px #d89a3122;
}

.loginCard button {
  width: 100%;
  margin-top: 16px;
  padding: 13px;
  border: 1px solid #dc9d37;
  border-radius: 7px;
  background: linear-gradient(#c88b29, #96621c);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: .08em;
}

.loginCard button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.loginError {
  margin: 12px 0 0;
  color: #ef716a;
  font-size: 11px;
}

@media (max-width: 480px) {
  .loginCard {
    padding: 28px 20px;
  }
}

/* Version 15: one rotation time for the whole daily schedule. */
.rotationControl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid #3b3020;
  border-radius: 9px;
  background: #17130e;
}

.rotationControl > div:first-child label,
.rotationControl > div:first-child small {
  display: block;
}

.rotationControl > div:first-child label {
  color: #efb041;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: .08em;
}

.rotationControl > div:first-child small {
  margin-top: 5px;
  color: #777976;
  font-size: 8px;
}

.rotationControl > div:last-child {
  display: flex;
  align-items: center;
  gap: 7px;
}

.rotationControl button {
  width: 34px;
  height: 34px;
  border: 1px solid #595047;
  border-radius: 6px;
  background: #201b15;
  color: #fff;
  font-size: 18px;
}

.rotationControl input {
  width: 82px;
  padding: 9px 6px;
  border: 1px solid #595047;
  border-radius: 6px;
  outline: none;
  background: #0e0f10;
  color: #fff;
  font: bold 13px monospace;
  text-align: center;
}

.rotationControl input:focus {
  border-color: #d89a31;
}

.rotationControl span {
  color: #92938f;
  font-size: 9px;
  font-weight: bold;
}

.serverBadge {
  color: #fff;
  font-size: 9px;
  letter-spacing: .06em;
  text-align: right;
}

@media (max-width: 620px) {
  .rotationControl {
    align-items: stretch;
    flex-direction: column;
  }

  .rotationControl > div:last-child {
    justify-content: space-between;
  }

  .rotationControl input {
    flex: 1;
  }

  .templateStepper span {
    font-size: 8px;
    letter-spacing: .04em;
  }
}

/* Keep the Timetable palette authoritative over earlier version layers. */
.loginScreen {
  background: radial-gradient(circle at 50% 20%, #34251e, transparent 38%), #080808;
}

.loginCard {
  background: #191919;
  border-color: #353535;
}

.loginCard > label {
  color: #b98b70;
}

.loginCard input:focus,
.rotationControl input:focus {
  border-color: #855c43;
  box-shadow: 0 0 0 3px #704a3538;
}

.loginCard button {
  background: #704a35;
  border-color: #704a35;
}

.templateStepper button:hover {
  border-color: #8b624a;
  color: #d0a98f;
}

.rotationControl {
  background: #241b17;
  border-color: #4b3a31;
}

.rotationControl > div:first-child label {
  color: #d0a98f;
}

.rotationControl button {
  background: #222;
  border-color: #494949;
}