/* The screens panel on a venue card.
 *
 * Its own file for the same reason the kiosk has one: screens are one product
 * of three and it should be possible to work on them without editing the file
 * the whole app lives in. Uses the app's own tokens throughout, so a change to
 * the palette reaches this panel rather than leaving it behind.
 */

.screens { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.screens h4 { margin: 0 0 4px; font-size: 13px; font-weight: 650; color: var(--ink); }
.screens .why { color: var(--faint); font-size: 13px; margin: 0 0 12px; }

/* Where the code from the television is typed. Set in the same large mono the
 * screen itself uses, so what is on the wall and what is in the box look like
 * the same thing to whoever is copying between them. */
.screens .pairing {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 14px; border: 1px solid var(--accent); border-radius: 10px;
  background: var(--ground);
}
.screens .pairing .grow { flex: 1; min-width: 220px; }
.screens .claimlabel { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.screens .code {
  font-size: 30px; font-weight: 650; letter-spacing: 6px; color: var(--ink);
  line-height: 1;
}
.screens input.code {
  width: 100%; max-width: 260px; padding: 6px 10px; text-transform: uppercase;
  background: transparent; border: 1px solid var(--line); border-radius: 8px;
}
.screens input.code:focus { outline: none; border-color: var(--accent); }
.screens .pairing .msg { font-size: 12.5px; }
.screens .pairing .expiry { color: var(--faint); font-size: 12.5px; margin-top: 6px; }

.screens .blocked {
  padding: 12px; border: 1px dashed var(--line); border-radius: 10px;
  color: var(--muted); font-size: 13px;
}
.screens .blocked b { color: var(--ink); font-weight: 600; }

/* Paid for versus plugged in. Screen is the only product billed per device, so
 * this line is the one place those two numbers are shown together. */
.screens .tally { color: var(--faint); font-size: 12.5px; margin: 0 0 10px; }
.screens .tally b { color: var(--ink); font-weight: 600; }

.screens .devices { margin-top: 10px; }
.sdev {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--ground);
}
.sdev + .sdev { margin-top: 8px; }
.sdev .grow { min-width: 200px; }
.sdev .sname { font-weight: 600; font-size: 14px; }
.sdev .smeta { color: var(--faint); font-size: 12.5px; margin-top: 2px; }
.sdev button { padding: 6px 12px; font-size: 12.5px; }

/* The content picker sits on its own line so a long menu-board address does not
 * push the online dot and the Remove button off the card. */
.sdev .pick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; width: 100%; }
.sdev .pick select { font-size: 12.5px; padding: 5px 8px; }
.sdev .pick input[type="url"] { flex: 1; min-width: 180px; font-size: 12.5px; padding: 5px 8px; }
.sdev .pick .msg { font-size: 12px; }

.screens .srow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.screens button { padding: 8px 14px; font-size: 13px; }

/* Settings are folded away. Most venues set the default once and never return. */
.ssettings { margin-top: 12px; }
.ssettings > summary {
  cursor: pointer; font-size: 13px; color: var(--muted);
  padding: 6px 0; list-style: none;
}
.ssettings > summary::-webkit-details-marker { display: none; }
.ssettings > summary::before { content: "\25B8 "; color: var(--faint); }
.ssettings[open] > summary::before { content: "\25BE "; }
.ssettings .body {
  padding: 12px; margin-top: 4px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--ground);
}
.ssettings .grid { display: flex; gap: 12px; flex-wrap: wrap; }
.ssettings label { flex: 1; min-width: 170px; font-size: 12.5px; color: var(--muted); }
.ssettings label input[type="url"],
.ssettings label input[type="number"],
.ssettings label select { margin-top: 4px; width: 100%; }
.ssettings .note { color: var(--faint); font-size: 12px; margin-top: 10px; }
.ssettings .save { margin-top: 12px; display: flex; gap: 10px; align-items: center; }