/*
Copyright (c) Meta Platforms, Inc. and affiliates.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/

/*
 * Shared styles for all the moq-encoder-player browser demos.
 *
 * It restyles the existing markup (the `.boxed` cards and the float-based
 * `.styleform` rows) so every demo page shares the same look. No HTML
 * structure or JavaScript behaviour depends on this file.
 */

:root {
  --bg: #0f1419;
  --card-bg: #1a2029;
  --border: #2c3540;
  --text: #e3e8ee;
  --muted: #93a1b0;
  --accent: #5b9dff;
  --accent-hover: #7fb2ff;
  --field-bg: #11161d;
  --field-disabled-bg: #232b35;
  --button-disabled-bg: #2c3540;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  /* Render native controls (checkboxes, select popups, scrollbars) dark too */
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg);
}

h1 {
  font-size: 24px;
  margin: 0 0 8px;
}

h2 {
  font-size: 18px;
  margin: 0 0 12px;
}

h3 {
  font-size: 15px;
  color: var(--muted);
  margin: 16px 0 8px;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}

/* Card container (was a plain black border) */
.boxed {
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin: 0 0 16px;
}

/* Contain the floated form rows inside each card */
.boxed::after {
  content: '';
  display: table;
  clear: both;
}

/* Form layout (kept float-based so the existing markup keeps working) */
.styleform label {
  float: left;
  margin: 5px 10px;
  color: var(--text);
}

.styleform input,
.styleform select {
  margin: 5px 10px;
}

.styleform .clear {
  clear: both;
}

/* Inputs / selects */
input[type='text'],
select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  color: var(--text);
  background-color: var(--field-bg);
}

input[type='text']:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
}

input[readonly],
input:disabled,
select:disabled {
  background-color: var(--field-disabled-bg);
  color: var(--muted);
}

/* Buttons */
button {
  margin: 6px 6px 6px 0;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background-color: var(--accent);
  color: #0b1018;
  font: inherit;
  cursor: pointer;
}

button:hover:not(:disabled) {
  background-color: var(--accent-hover);
}

button:disabled {
  background-color: var(--button-disabled-bg);
  color: var(--muted);
  cursor: not-allowed;
}

/* Media */
canvas,
video {
  display: block;
  max-width: 100%;
  border-radius: var(--radius);
}

/* Log lists (dropped frames, received messages, ...) */
ol {
  max-height: 240px;
  margin: 8px 0 0;
  padding: 8px 8px 8px 32px;
  overflow-y: auto;
  background-color: #0f1722;
  color: #d6e2f0;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

ol:empty {
  display: none;
}

/* Two-column layout (used by the event player) */
.column {
  float: left;
  width: 50%;
}

.row::after {
  content: '';
  display: table;
  clear: both;
}