/* Screens uses the same surface, typography and controls as the host app. */
.screens-module {
  padding-bottom: 40px;
  background: var(--bg);
  color: var(--text);
}
.screens-heading {
  gap: 20px;
}
.screens-tabs,
#screens-content,
#screens-message {
  margin-left: 20px;
  margin-right: 20px;
}
.screens-tabs {
  display: flex;
  gap: 6px;
  overflow: auto;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.screens-tabs button {
  border: 0;
  background: none;
  padding: 13px 18px;
  white-space: nowrap;
  color: inherit;
  cursor: pointer;
}
.screens-tabs .active {
  color: var(--teal);
  box-shadow: inset 0 -3px currentColor;
  font-weight: 700;
}
.screens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.screens-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 2px 8px #0000000a;
}
.screens-card h3 {
  margin: 16px 0 8px;
  overflow-wrap: anywhere;
}
.screens-card p {
  font-size: 13px;
  opacity: 0.7;
}
.screens-card dl {
  font-size: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 20px 0;
}
.screens-card dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.screens-tv {
  height: 130px;
  background: linear-gradient(135deg, #072534, #126779);
  border: 7px solid #163644;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #7ed5de;
  font-size: 42px;
  position: relative;
}
.screens-status {
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 20px;
  background: #64748b;
  color: #fff;
}
.screens-status.online {
  background: #087e66;
}
.screens-thumbnail {
  height: 160px;
  background: #071e2b;
  border-radius: 10px;
  overflow: hidden;
}
.screens-thumbnail img,
.screens-thumbnail video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.screens-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0;
}
.screens-empty {
  padding: 48px 24px;
  text-align: center;
  grid-column: 1/-1;
  border: 1px dashed var(--border);
  background: var(--card);
  border-radius: var(--radius);
  color: var(--muted);
}
.screens-empty > span {
  font-size: 48px;
  color: var(--teal);
}
.screens-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  border: 0;
  border-radius: 20px;
  padding: 28px;
  width: min(760px, 94vw);
  max-height: 90vh;
  overflow: auto;
  color: inherit;
  background: var(--card);
  box-shadow: 0 24px 100px #0006;
}
.screens-dialog::backdrop {
  background: #06202aa8;
  backdrop-filter: blur(5px);
}
.screens-dialog label {
  display: flex;
  gap: 8px;
  flex-direction: column;
  margin: 14px 0;
  font-size: 13px;
}
.screens-dialog input,
.screens-dialog select,
.screens-actions select {
  padding: 10px;
  border: 1px solid #b7c9d2;
  border-radius: 8px;
  max-width: 100%;
  background: transparent;
  color: inherit;
}
.screens-dialog input[type="checkbox"] {
  width: 18px;
  height: 18px;
}
.screens-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 8px 0;
}
.screens-item strong {
  flex: 1;
  overflow-wrap: anywhere;
}
.screens-item button {
  padding: 8px;
  cursor: pointer;
  border: 0;
  border-radius: 5px;
  margin: 2px;
}
.screens-item label {
  max-width: 160px;
  margin: 0;
}
.screens-preview {
  height: 260px;
  position: relative;
  background: #000;
  overflow: hidden;
}
.screens-preview img,
.screens-preview video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.screens-dialog [role="alert"],
#screens-message {
  color: #ae2828;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .screens-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .screens-item {
    flex-wrap: wrap;
  }
}

.screens-heading > div {
  flex: 1;
  min-width: 0;
}
.screens-module .btn-primary,
.screens-module .btn-secondary,
.screens-dialog .btn-primary,
.screens-dialog .btn-secondary {
  width: auto;
}
.screens-heading > button {
  flex: 0 0 auto;
}
.screens-tv svg {
  width: 64px;
  height: 64px;
  opacity: 0.7;
}
.screens-empty > svg {
  width: 48px;
  height: 48px;
  color: var(--teal);
}
.screens-item-thumbnail {
  width: 64px;
  height: 48px;
  flex: 0 0 64px;
  background: #062331;
  border-radius: 6px;
  overflow: hidden;
}
.screens-item-thumbnail img,
.screens-item-thumbnail video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Display editor follows the app's card and form conventions. */
.screens-dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.screens-dialog-heading h2 {
  font-size: 22px;
  line-height: 1.25;
}
.screens-close {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: var(--bg);
  color: var(--muted);
  font-size: 24px;
  cursor: pointer;
}
.screens-dialog label.screens-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.screens-dialog input[type="checkbox"] {
  flex: 0 0 18px;
  padding: 0;
  accent-color: var(--teal);
}
.screens-dialog input:not([type="checkbox"]):not([type="file"]),
.screens-dialog select {
  width: 100%;
  min-height: 42px;
}
.screens-dialog input[type="file"][hidden] {
  display: none;
}
.screens-editor-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.screens-section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.screens-section-heading h3 {
  font-size: 15px;
}
.screens-count {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--teal-light);
  color: var(--teal);
  font-size: 12px;
}
.screens-hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.screens-editor-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 24px 20px;
  margin: 16px 0;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--bg);
  text-align: center;
}
.screens-editor-empty svg {
  width: 30px;
  height: 30px;
  color: var(--teal);
}
.screens-editor-empty strong {
  font-size: 14px;
}
.screens-editor-empty p {
  max-width: 420px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.screens-media-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin-top: 16px;
}
.screens-media-picker label {
  margin: 0;
  min-width: 0;
}
.screens-upload-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.screens-editor-toolbar {
  flex-wrap: nowrap;
}
.screens-editor-toolbar .btn-secondary {
  flex-shrink: 0;
}
.screens-dialog-footer:has([name="mode"]) {
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.screens-dialog-footer {
  margin-bottom: 0;
}
.screens-dialog [role="alert"]:empty {
  display: none;
}
.screens-dialog [role="alert"]:not(:empty),
#screens-message:not([hidden]) {
  padding: 12px 14px;
  background: #fff1f0;
  border: 1px solid #f4ceca;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  margin-top: 12px;
}
.screens-dialog button:disabled,
.screens-dialog select:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.screens-card h3 {
  font-size: 17px;
}
.screens-tv {
  height: 96px;
  background: var(--teal-light);
  border: 1px solid var(--border);
  color: var(--teal);
}
.screens-tv svg {
  width: 40px;
  height: 40px;
}
.screens-card dl {
  gap: 8px 12px;
  margin: 16px 0;
}
.screens-card dt {
  color: var(--muted);
}
@media (max-width: 600px) {
  .screens-dialog {
    padding: 20px;
    border-radius: 14px;
    max-height: 92dvh;
  }
  .screens-media-picker {
    grid-template-columns: minmax(0, 1fr);
  }
  .screens-editor-toolbar {
    flex-wrap: wrap;
  }
  .screens-dialog-footer:has([name="mode"]) {
    justify-content: stretch;
  }
  .screens-dialog-footer:has([name="mode"]) > button {
    flex: 1 1 140px;
  }
  .screens-upload-row > button {
    width: 100%;
  }
}

.screens-media-picker[hidden] {
  display: none;
}
.screens-dialog-footer:has([name="mode"]) [data-close] {
  margin-right: auto;
}
.screens-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 150px auto;
}
@media (max-width: 600px) {
  .screens-item {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .screens-item label {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px;
    align-items: center;
    max-width: none;
  }
  .screens-item label.screens-checkbox {
    display: flex;
  }
  .screens-item > div:last-child {
    grid-column: 1 / -1;
    text-align: right;
  }
}

.screens-preview > img, .screens-preview > video { position: absolute; inset: 0; transition: opacity 550ms ease; }

.screens-tv .screens-live-preview { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }

.screens-display-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; text-align: center; }
.screens-display-placeholder svg { height: 48px; }

.screens-tv { height: auto; aspect-ratio: 16 / 9; overflow: hidden; }

.screens-display-timing { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 500px) { .screens-display-timing { grid-template-columns: 1fr; } }

button.screens-tv { width: 100%; padding: 0; font: inherit; cursor: pointer; }
button.screens-tv:hover { border-color: var(--teal); }
button.screens-tv:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

.screens-output { border: 1px solid var(--border-color, #dce1e7); border-radius: 12px; padding: 16px; margin: 18px 0; min-width: 0; }
.screens-output legend { font-weight: 700; padding: 0 6px; }
.screens-schedule-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding: 12px 0; border-bottom: 1px solid #dce1e7; }
.screens-weekdays { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.screens-weekdays label { display: flex; align-items: center; gap: 4px; }
.screens-weekdays input { width: auto; }
.screens-schedule-row label { margin: 0; }
.screens-output .screens-actions { flex-wrap: wrap; }
.screens-output .screens-live-preview { width: 100%; max-height: 180px; object-fit: contain; background: #000; border-radius: 8px; }

/* Device settings progressively disclose less common controls. */
.screens-settings-section {
  border: 1px solid var(--border, #dce1e7);
  border-radius: 12px;
  margin: 16px 0;
  padding: 0 16px;
}
.screens-settings-section > summary {
  cursor: pointer;
  padding: 16px 0;
  font-weight: 600;
}
.screens-settings-section > summary:focus-visible {
  outline: 2px solid var(--primary, #217476);
  outline-offset: 4px;
}
.screens-settings-section[open] { padding-bottom: 12px; }
.screens-dialog [hidden] { display: none !important; }
.screens-dialog-footer {
  position: sticky;
  bottom: -28px;
  background: var(--card);
  padding: 16px 0;
  border-top: 1px solid var(--border, #dce1e7);
  justify-content: flex-end;
  z-index: 2;
}
.screens-device-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.screens-device-heading h3 { margin: 0; }
.screens-device-card .screens-status { position: static; display: inline-block; margin-top: 12px; }
.screens-settings-button {
  display: grid; place-items: center; flex-shrink: 0;
  width: 44px; height: 44px; padding: 10px;
  border: 1px solid var(--border); border-radius: 50%;
  background: transparent; color: var(--text); cursor: pointer;
}
.screens-settings-button svg { width: 22px; height: 22px; }
.screens-settings-button:hover { background: var(--bg); }
.screens-settings-button:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.screens-output-list { list-style: none; padding: 0; margin: 16px 0 0; }
.screens-output-list li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13px; }
.screens-output-list strong { text-align: right; overflow-wrap: anywhere; min-width: 0; }

.screens-device-dialog { padding: 24px; width: min(720px, 94vw); }
.screens-device-dialog .screens-dialog-heading {
  position: sticky; top: -24px; z-index: 3;
  background: var(--card); padding: 16px 0; margin-top: -16px;
  border-bottom: 1px solid var(--border);
}
.screens-device-subtitle { color: var(--muted); margin: 8px 0 24px; font-size: 14px; }
.screens-output-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.screens-output-grid > .screens-output { margin: 0; background: var(--bg); }
.screens-device-dialog .screens-settings-section { background: var(--card); }
.screens-device-dialog summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.screens-device-dialog summary::-webkit-details-marker { display: none; }
.screens-device-dialog summary::after { content: '+'; font-size: 20px; font-weight: 400; color: var(--muted); }
.screens-device-dialog details[open] > summary::after { content: '−'; }
.screens-device-dialog .screens-hint { font-size: 12px; line-height: 1.6; color: var(--muted); }
.screens-device-notice { padding: 12px 14px; border-radius: 8px; background: var(--bg); font-size: 13px; line-height: 1.6; }
.screens-maintenance-block { border-top: 1px solid var(--border); margin-top: 20px; padding-top: 16px; }
.screens-maintenance-block h3 { margin: 0; font-size: 14px; }
.screens-device-metrics { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; margin: 16px 0; font-size: 12px; }
.screens-device-metrics dt, .screens-device-metrics dd { padding: 10px 0; border-bottom: 1px solid var(--border); }
.screens-device-metrics dt { color: var(--muted); }
.screens-device-metrics dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.screens-command-history { padding-left: 18px; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.screens-unpair-row { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 20px; }
.screens-device-dialog .screens-dialog-footer { bottom: -24px; margin-top: 24px; }
@media (max-width: 600px) {
  .screens-output-grid { grid-template-columns: 1fr; }
  .screens-device-dialog .screens-actions > button { flex: 1; }
}

/* Keep creation actions quiet while retaining a comfortable touch target. */
.screens-module #screens-add {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  box-shadow: none;
}
.screens-module #screens-add:hover { border-color: var(--teal); color: var(--teal); }
.screens-dialog #screen-item-add,
.screens-dialog #screen-editor-upload-button,
.screens-dialog [data-add-window] {
  min-height: 40px; padding: 8px 12px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--border); border-radius: 8px;
  background: transparent; color: var(--text); box-shadow: none;
}
.screens-playlist-delete-row { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.screens-playlist-delete-row .btn-secondary { padding: 8px 12px; font-size: 12px; font-weight: 500; }

/* Open device sections: hierarchy and spacing replace disclosure menus. */
.screens-device-dialog { width: min(900px, 94vw); }
.screens-device-basics { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 8px 0 20px; }
.screens-device-dialog section.screens-settings-section {
  border: 0; border-top: 1px solid var(--border);
  border-radius: 0; padding: 20px 0 0; margin: 24px 0 0;
  background: transparent;
}
.screens-device-dialog section.screens-settings-section > h3 {
  margin: 0 0 16px; font-size: 14px; font-weight: 600;
}
.screens-device-dialog .screens-output-grid { align-items: start; }
.screens-device-dialog .screens-output-grid > .screens-output { background: var(--card); }
.screens-device-dialog input:not([type="checkbox"]):not([type="file"]),
.screens-device-dialog select { width: 100%; min-height: 40px; box-sizing: border-box; }
.screens-device-dialog .screens-maintenance-block { margin-top: 24px; padding-top: 20px; }
.screens-device-dialog .screens-device-metrics { gap: 0 24px; }
@media (max-width: 600px) {
  .screens-device-basics { grid-template-columns: 1fr; gap: 0; }
}

.screens-port-switches { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; }
.screens-device-dialog label.screens-port-switch {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: 24px; padding: 12px 16px; margin: 0; min-width: 150px;
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-weight: 600;
}
.screens-port-switch:has(:checked) { border-color: var(--teal); }
.screens-device-dialog .screens-port-switch input {
  appearance: none; -webkit-appearance: none; position: relative;
  width: 40px; height: 24px; border-radius: 20px; padding: 0; margin: 0;
  background: #7b8491; border: 0; cursor: pointer; flex-shrink: 0;
}
.screens-port-switch input::before { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: white; top: 3px; left: 3px; }
.screens-device-dialog .screens-port-switch input:checked { background: var(--teal, #217476); }
.screens-port-switch input:checked::before { transform: translateX(16px); }
.screens-port-switch input:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.screens-output-grid.screens-single-output { grid-template-columns: minmax(0, 1fr); }
.screens-device-dialog .screens-trash-button { margin-right: auto; color: var(--muted); }
.screens-device-dialog .screens-trash-button:hover { color: #b42318; border-color: #b42318; }
.screens-device-heading h3 { min-width: 0; overflow-wrap: anywhere; }
.screens-device-card .screens-output-parent { margin: 10px 0 0; color: var(--muted); opacity: 1; font-size: 12px; }
.screens-device-dialog [data-output] { scroll-margin-top: 90px; }
.screens-device-link { border: 0; padding: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.screens-device-link:hover { color: var(--teal); }
.screens-port-dialog { width: min(620px, 94vw); }
.screens-card-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.screens-card-controls .screens-settings-button { width: 38px; height: 38px; padding: 8px; }
.screens-card-controls .screens-settings-button svg { width: 20px; height: 20px; }

/* Playback settings sit directly on the dialog surface. */
.screens-port-dialog .screens-output-grid { display: block; margin-top: 20px; }
.screens-port-dialog .screens-output-grid > .screens-output {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  background: transparent;
}
.screens-port-dialog .screens-output > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.screens-port-dialog .screens-output > label:first-of-type { margin-top: 0; }
.screens-port-dialog .screens-output > .screens-settings-section { margin-top: 24px; padding-top: 20px; }

.screens-device-dialog .screens-day-row {
  display: grid; grid-template-columns: minmax(65px, 1fr) repeat(2, minmax(0, 1fr));
  align-items: center; gap: 12px; padding: 10px 0;
}
.screens-device-dialog .screens-day-row label { margin: 0; }
.screens-device-dialog .screens-day-row .screens-checkbox { flex-direction: row; align-items: center; }
.screens-day-row input:disabled { opacity: .45; }

.screens-device-dialog [data-command] {
  min-height: 40px; padding: 8px 14px; font-size: 13px; font-weight: 500;
  border-radius: 8px; border: 1px solid var(--border); color: var(--text);
  background: var(--card); box-shadow: none;
}
.screens-device-dialog .screens-device-notice { margin: 12px 0; }
.screens-device-dialog .screens-device-metrics { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
.screens-device-dialog .screens-device-metrics dd { min-width: 0; max-width: 260px; }
@media (max-width: 500px) {
  .screens-device-dialog .screens-device-metrics dd { max-width: 150px; }
}

.screens-module .screens-settings-button[data-playlist] {
  width: 38px;
  height: 38px;
  padding: 8px;
}
.screens-module .screens-settings-button[data-playlist] svg {
  width: 20px;
  height: 20px;
}