/* Simple, no-framework styling so the whole thing is easy to read/edit. */
:root {
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --bg: #f4f6f9;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;
  --ok: #16a34a;
  --danger: #dc2626;
  --code-bg: #f3f4f6;
}

/* Dark mode: same variable set, values swapped. Only applies to the admin
   dashboard chrome (base.html) - player.html never links this stylesheet,
   so signage screens are structurally unaffected. */
:root[data-theme="dark"] {
  --bg: #0f172a;
  --card: #1e293b;
  --text: #f1f5f9;
  --muted: #94a3b8;
  --border: #334155;
  --code-bg: #0b1220;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.navbar {
  background: #111827;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.5rem;
}

.navbar .brand { font-weight: 700; font-size: 1.1rem; color: #fff; }
.navbar nav a { color: #d1d5db; margin-left: 1.2rem; padding-bottom: 4px; border-bottom: 2px solid transparent; }
.navbar nav a:hover { color: #fff; text-decoration: none; }
.navbar nav a.active { color: #fff; font-weight: 600; border-bottom-color: var(--brand); }

.container {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

h1 { font-size: 1.5rem; margin-top: 0; }
h2 { font-size: 1.15rem; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; }

.btn {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  border: none;
  padding: 0.55rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
}
.btn:hover { background: var(--brand-dark); text-decoration: none; }
.btn.secondary { background: #6b7280; }
.btn.danger { background: var(--danger); }
.btn.small { padding: 0.3rem 0.6rem; font-size: 0.85rem; }

.form-group { margin-bottom: 1rem; }
label { display: block; margin-bottom: 0.3rem; font-weight: 600; font-size: 0.9rem; }
input[type=text], input[type=password], input[type=number], input[type=url], select, input[type=file] {
  width: 100%;
  padding: 0.55rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
}

/* Disk/memory usage bars on Settings > Server Resources */
.usage-bar { background: var(--border); border-radius: 4px; height: 8px; overflow: hidden; margin: 0.3rem 0 0.6rem; }
.usage-bar-fill { background: var(--brand); height: 100%; }
.usage-bar-fill.high { background: var(--danger); }

/* System log tail on Settings > System Log */
.log-tail {
  background: var(--code-bg);
  border-radius: 6px;
  padding: 0.7rem;
  max-height: 320px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Show/hide toggle button for password fields - see static/js/password-toggle.js */
.password-field { position: relative; }
.password-field input { padding-right: 2.4rem; }
.pw-toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2.4rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

/* Type-to-filter combobox (timezone / weather location pickers) - see
   static/js/combobox.js. The dropdown is positioned relative to .combobox
   so it doesn't affect the layout of anything below it while open. */
.combobox { position: relative; }
.cb-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 260px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.cb-group-label {
  padding: 0.4rem 0.7rem 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.cb-option {
  padding: 0.5rem 0.7rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.cb-option:hover, .cb-option.cb-active { background: color-mix(in srgb, var(--brand) 12%, var(--card)); }

.badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.badge.online { background: #dcfce7; color: var(--ok); }
.badge.offline { background: #f3f4f6; color: var(--muted); }

.flash { padding: 0.7rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.9rem; }
.flash.success { background: #dcfce7; color: #166534; }
.flash.error { background: #fee2e2; color: #991b1b; }

.muted { color: var(--muted); font-size: 0.88rem; }
.row { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.center-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card { width: 100%; max-width: 360px; }
code.url { background: var(--code-bg); padding: 0.5rem; border-radius: 6px; display: block; word-break: break-all; }

/* A URL long enough to have no natural wrap point - a player token URL, or a
   data: URI saved as web-page media - otherwise renders as one unbreakable
   line and pushes the whole page wider than the screen. Only takes effect on
   content that would already be overflowing, so normal prose is unaffected. */
p, a { overflow-wrap: break-word; }

.navbar .brand { display: flex; align-items: center; gap: 0.4rem; }
.navbar .brand-icon { height: 28px; vertical-align: middle; }
.navbar .brand-sub { font-weight: 500; }
.navbar nav { display: flex; align-items: center; }
.theme-toggle { margin-left: 1.2rem; }

.login-brand-plate { background: #fff; border-radius: 8px; padding: 1rem 1.5rem; margin: 0 auto 1rem; max-width: 220px; }
.login-brand-logo { max-width: 100%; display: block; margin: 0 auto; }
.login-brand-name { text-align: center; margin: 0 0 1.5rem; font-size: 1.2rem; font-weight: 700; }
.login-brand-name .muted { font-weight: 500; }

.btn.confirm-armed { background: var(--danger); outline: 2px solid var(--danger); outline-offset: 1px; }

details summary { cursor: pointer; color: var(--brand); font-size: 0.9rem; }
details form { max-width: 320px; }

.site-footer { text-align: center; padding: 1.5rem; font-size: 0.8rem; }

/* Layout preview on the layout detail page - a scaled-down sketch of the
   same CSS Grid the player builds, so admins can see what they're editing. */
.layout-preview {
  display: grid;
  gap: 4px;
  height: 260px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
}
.lp-zone {
  background: var(--card);
  border-radius: 4px;
  padding: 0.5rem;
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}
.lp-main { background: color-mix(in srgb, var(--brand) 15%, var(--card)); }

/* ---------------------------------------------------------------------------
   Phones and small tablets.
   Everything above is the desktop layout and is deliberately left alone -
   this block only overrides what actually breaks on a narrow screen. The
   two real culprits were the nav bar (a single non-wrapping row of 9 links,
   755px wide against a 375px viewport) and data tables, either of which
   stretched <body> wider than the screen and made every page scroll
   sideways.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Nothing should ever push the page wider than the phone screen. */
  html, body { overflow-x: hidden; }

  /* Brand on its own line, then the links wrapping underneath it, so all of
     them stay reachable instead of running off the right edge. */
  .navbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
  }
  .navbar nav {
    flex-wrap: wrap;
    gap: 0.15rem 1rem;
  }
  .navbar nav a { margin-left: 0; }
  /* "by Insight" is decorative - the space is better spent on the links. */
  .navbar .brand-sub { display: none; }
  .theme-toggle { margin-left: auto; }

  .container {
    margin: 1rem auto;
    padding: 0 1rem;
  }
  .card { padding: 1rem; }

  /* Tables scroll inside their own card rather than stretching the page.
     display:block is what makes overflow-x apply to a <table> at all;
     min-width keeps the columns from collapsing into an unreadable
     concertina, and momentum scrolling makes the swipe feel native. */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  th, td { padding: 0.6rem 0.7rem; }

  /* Stacked, full-width form rows - side-by-side fields are unusable at
     this width. Buttons keep their natural width and sit next to each
     other; stretching an "+ Add Screen" to the full width of the screen
     looks like a mistake rather than a design. */
  .row { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .row > *:not(.btn) { width: 100%; }
  .row > .btn { align-self: flex-start; }
  /* A nested .row is nearly always a button group (see dashboard.html's
     "Manage Groups" / "+ Add Screen" pair) - those should stay side by side
     and wrap, not stack into a column of full-width bars. */
  .row .row {
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    gap: 0.5rem;
  }

  /* iOS zooms the page in when focusing an input whose text is under 16px.
     Bumping to exactly 16px prevents that without visibly changing much. */
  input[type=text], input[type=password], input[type=number],
  input[type=url], input[type=email], select, textarea {
    font-size: 16px;
  }

  /* Comfortable tap targets - 0.55rem padding is fine for a mouse, tight
     for a thumb. */
  .btn { padding: 0.7rem 1rem; }
  .btn.small { padding: 0.45rem 0.8rem; }

  details form { max-width: none; }

  /* The preview's narrow side zones stack a label above a description, and
     at desktop font sizes that clips (.lp-zone hides overflow) once the
     grid is only a phone wide. Smaller type and tighter padding fit both
     lines; the extra height gives the short bottom cells room too. */
  .layout-preview { height: 240px; }
  .lp-zone {
    font-size: 0.65rem;
    padding: 0.25rem;
    line-height: 1.25;
  }
}