:root {
  --bg: #11151c;
  --panel: #1b2230;
  --text: #e6eaf2;
  --muted: #8a93a6;
  --accent: #7a5af5;
  --danger: #e25c5c;
  --border: #2a3142;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font: 14px/1.5 system-ui, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.appbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; background: var(--panel); border-top: 1px solid var(--border); margin-top: 24px; }
.brand { font-weight: 600; color: var(--text); }
.navlinks { display: flex; align-items: center; gap: 16px; }
main { max-width: 960px; margin: 0 auto 24px; padding: 0 24px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 24px; margin-bottom: 16px; }
h1 { margin-top: 0; }
.flash { padding: 12px 16px; margin: 16px auto; max-width: 960px; border-radius: 6px; }
.flash-info { background: #16334a; color: #d4e6f7; }
.flash-error { background: #3a1f1f; color: #f4cfcf; }
.flash-success { background: #1f3a26; color: #cfeed4; }
form label { display: block; margin: 12px 0; }
form input[type=text], form input[type=password], form input:not([type]), form select { display: block; width: 100%; padding: 8px 10px; background: #0d1219; color: var(--text); border: 1px solid var(--border); border-radius: 4px; }
form input.key-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.05em; }
form input.key-input::placeholder { color: var(--text); opacity: 0.55; letter-spacing: 0.15em; }
.inline-form { display: inline; }
/* Base button — all dashboard buttons share padding + radius + weight */
button, a.button {
  font: inherit;
  padding: 6px 14px;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-decoration: none;
  display: inline-block;
}
button:hover, a.button:hover { background: var(--panel); text-decoration: none; }
button:disabled, a.button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Variants */
button.primary, a.primary.button { background: var(--accent); color: white; border-color: var(--accent); }
button.primary:hover, a.primary.button:hover { background: var(--accent); opacity: 0.9; }
button.danger { background: var(--danger); color: white; border-color: var(--danger); }
button.danger:hover { background: var(--danger); opacity: 0.9; }
button.linkish { background: none; color: var(--accent); border: none; padding: 0; cursor: pointer; font: inherit; font-weight: normal; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.row-actions { display: flex; gap: 12px; }
.grid { width: 100%; border-collapse: collapse; margin-top: 16px; }
.grid th, .grid td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.muted { color: var(--muted); }
code { background: #0d1219; padding: 1px 6px; border-radius: 3px; }
/* Icon-button override (keeps the tighter padding for emoji buttons) */
.icon-btn { padding: 2px 6px; font-size: 0.9em; line-height: 1; font-weight: normal; margin-left: 4px; }
.icon-btn:disabled { opacity: 0.5; cursor: wait; }

/* Destination cards */
.dest-card { margin-bottom: 16px; }
.dest-card-header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 0; }
.dest-card-header h2.dest-card-name { margin: 0; font-size: 1.1em; }
.dest-card-configure > summary { cursor: pointer; color: var(--accent); font-size: 0.85em; letter-spacing: 0.05em; user-select: none; }
.dest-card-configure-body { padding-top: 12px; }
.dest-card-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.dest-card-fields label { margin: 0; }
.dest-card-fields .save-fields-btn { align-self: flex-start; }

/* Destinations section header: heading on the left, Add form on the right.
   The Add form is the only thing besides the heading; flex justify-content
   spreads them apart. */
.destinations-section-header {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin: 24px auto 12px;
  max-width: 960px;
  padding: 0 24px;
}
.destinations-section-header h2 { margin: 0; flex-shrink: 0; }
.destinations-section-header .add-dest-form {
  margin: 0 0 0 auto;
  padding: 0;
  max-width: none;
  flex: 0 0 50%;
  justify-content: flex-end;
}

/* View all button — centered below the destinations list. */
.destinations-view-all {
  display: flex;
  justify-content: center;
  margin: 16px 0 24px;
}

/* Auth row — below card header, above CONFIGURE */
.dest-card-auth-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  margin: 0;
}
/* No flex:1 on .dest-account — keeps the Authenticate/Deauthenticate
   button packed left next to the auth text instead of right-aligned. */

/* Add destination form — sits directly below the destinations header,
   no card chrome, no heading. */
.add-dest-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 960px;
  margin: 0 auto 24px;
  padding: 0 24px;
}
.add-dest-form label { margin: 0; flex: 1 1 160px; }

/* Streamer controls — full viewport-width section, no card chrome on
   dashboard. The width/margin-left pair is the standard "escape a
   constrained parent" trick: width=100vw + margin-left=calc(-50vw + 50%)
   pulls the section out to the viewport edges while still living inside
   the <main> max-width:960px container. */
.streamer-controls {
  background: transparent;
  border: none;
  padding: 0 24px 16px;
  margin: 0 0 16px;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  box-sizing: border-box;
}
.streamer-controls #session-state { text-align: right; margin: 8px 0; }

/* Responsive auto-fit grid: items fill the row, min 280px, capped grid
   width at 1400px and centered so items aren't absurdly wide on big
   displays. */
.sc-compact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin: 16px auto 0;
  max-width: 1400px;
}
.sc-compact-card {
  background: var(--bg, #0d1219);
  border: 2px solid #555;
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 150ms ease-in-out;
}
/* Status-colored outline driven by the per-card status dot's data-state. */
.sc-compact-card:has([data-role="status-dot"][data-state="running"])    { border-color: #4ade80; }
.sc-compact-card:has([data-role="status-dot"][data-state="restarting"]) { border-color: #facc15; }
.sc-compact-card:has([data-role="status-dot"][data-state="failed"])     { border-color: var(--danger); }
.sc-compact-card:has([data-role="status-dot"][data-state="stopped"])    { border-color: #555; }
.sc-compact-card:has([data-role="status-dot"][data-state="offline"])    { border-color: #555; }

/* Compact card top row: Start/Stop button on the LEFT, name + auth on the RIGHT. */
.sc-compact-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.sc-compact-top-left { flex-shrink: 0; }
.sc-compact-top-right { flex: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; text-align: right; }
.sc-compact-name-row { display: flex; align-items: center; gap: 6px; }
.sc-compact-name { font-size: 0.95em; }
.sc-compact-meta { font-size: 0.85em; }
.sc-compact-livelink { font-size: 0.85em; }
.sc-compact-actions { display: flex; gap: 6px; margin-top: 4px; align-items: center; flex-wrap: wrap; }
/* Save button right-aligned within each compact card's actions row. */
.sc-compact-actions > button[type=submit].primary { margin-left: auto; }

/* Auto-start toggle on destination cards */
.dest-autostart-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.9em; }

/* Toggles row: Auto-start + Use global title side by side */
.dest-toggles-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.dest-toggles-row label { margin: 0; }
.dest-use-global { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.9em; }

/* Anchor styled as a button (Kick/YouTube auth links — they use GET routes
   so they're <a> instead of <form><button>). Base button rules above cover it. */

/* CONFIGURE-dropdown Advanced row — left cluster of muted admin links,
   right-aligned Save destination button. */
.dest-card-advanced-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.dest-card-advanced-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.85em;
}

/* Compact-card Authenticate CTA — shown in place of the title/category form
   when the destination has no bound OAuth account. */
.sc-compact-auth-cta { margin-top: 4px; }
.sc-compact-auth-cta > .inline-form,
.sc-compact-auth-cta > a.button { display: block; }
.sc-compact-auth-cta button,
.sc-compact-auth-cta a.button { width: 100%; text-align: center; white-space: normal; }

/* Edit-name dialog */
dialog#rename-dest-dialog {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  min-width: 320px;
}
dialog#rename-dest-dialog::backdrop { background: rgba(0,0,0,0.6); }

/* Admin nav dropdown */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown-btn {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font: inherit;
}
.nav-dropdown-btn:hover { background: var(--panel); }
.nav-dropdown-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  min-width: 200px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 0;
  margin: 0 0 4px;
  list-style: none;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.4);
  z-index: 100;
  display: none;
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu li a {
  display: block;
  padding: 8px 16px;
  color: var(--text);
  text-decoration: none;
}
.nav-dropdown-menu li a:hover { background: var(--bg); }
.nav-section-sep { height: 1px; background: var(--border); margin: 6px 12px; }

/* Destination card status dot (before the name) */
.dest-status-dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #555; /* offline / default */
  flex-shrink: 0;
}
.dest-status-dot[data-state="running"]    { background: #4ade80; }
.dest-status-dot[data-state="restarting"] { background: #facc15; }
.dest-status-dot[data-state="failed"]     { background: var(--danger); }
.dest-status-dot[data-state="stopped"]    { background: #555; }
.dest-status-dot[data-state="offline"]    { background: #555; }

/* Right-align Start/Stop in the card header */
.dest-header-spacer { flex: 1; }
.dest-btn-start { background: #4ade80; color: #0d1219; border-color: #4ade80; }
.dest-btn-start:hover { background: #4ade80; opacity: 0.9; }
.dest-btn-stop  { background: var(--danger); color: white; border-color: var(--danger); }
.dest-btn-stop:hover { background: var(--danger); opacity: 0.9; }

/* At-a-glance status bar */
.status-bar { display: flex; flex-direction: column; gap: 8px; max-width: 960px; margin: 16px auto 0; padding: 0 24px; }
.status-chip { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 6px; font-size: 0.9em; }
.status-chip-error { background: #3a1f1f; color: #f4cfcf; border-left: 3px solid var(--danger); }
.status-chip-warn  { background: #3a2f1f; color: #f4e5cf; border-left: 3px solid #facc15; }
.status-chip-info  { background: #16334a; color: #d4e6f7; border-left: 3px solid var(--accent); }
.status-chip a { color: inherit; text-decoration: underline; }
.status-chip-icon { font-size: 1.1em; }

/* Fix select option white-on-white in dark theme */
form select option {
  background: #0d1219;
  color: var(--text);
}

/* Category row with inline Save button */
.dest-category-row { display: flex; align-items: flex-end; gap: 12px; }
.dest-category-row .dest-category-label { flex: 1; margin: 0; }
.dest-category-row > button[type=submit] { margin-bottom: 0; flex-shrink: 0; }

/* Global title form: input + Save button side-by-side, Save right-aligned */
.global-title-form { display: flex; align-items: flex-end; gap: 12px; }
.global-title-input { flex: 1; }
.global-title-form > button[type=submit] { margin-bottom: 0; flex-shrink: 0; }

/* Compact card category row — no label, placeholder text in the input. */
.sc-compact-category-row { display: flex; align-items: center; gap: 6px; }
.sc-compact-category-row > input.category-picker { flex: 1; }

/* Compact card form fields */
.sc-compact-fields-form { display: flex; flex-direction: column; gap: 6px; }
.sc-compact-toggles { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sc-compact-toggles label { margin: 0; }

/* Consolidated flash area */
.flashes { max-width: 960px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 8px; }
.flashes:empty { display: none; }

/* SRT URL + copy + setup guide row (session-state row) */
.sc-status-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 8px 0;
  min-width: 0;
}
.ingest-help {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9em;
  min-width: 0;
}
/* The SRT URL can be long; let it shrink (min-width:0 + overflow) and
   ellipsify rather than blowing out the row width. A blown-out row
   forces a horizontal scrollbar which breaks the 100vw math on the
   parent .streamer-controls and visibly off-centers the rest of the
   page. */
.ingest-help code {
  background: #0d1219;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 0.95em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#copy-publish-url { font-size: 0.85em; padding: 2px 8px; flex-shrink: 0; }
.ingest-help > a { flex-shrink: 0; }
.sc-status-row #session-state { margin: 0; flex-shrink: 0; }