/* Multi Stream | gdh — renk ve yazı tipleri gdh.web tasarım token'larından (app.css @theme). */

:root {
  --gdh-brand: #cc0000;           /* --color-brand */
  --gdh-brand-dark: #990000;      /* --color-brand-dark */
  --gdh-brand-on-dark: #ff7a7a;   /* --color-brand-on-dark */
  --gdh-surface: #262a33;         /* --color-surface-dark-2 (sayfa) */
  --gdh-panel: #2b2f37;           /* --color-surface-dark (panel) */
  --gdh-ink: #ededed;             /* --color-ink-on-dark */
  --gdh-ink-muted: rgba(237, 237, 237, .62);
  --gdh-rule: rgba(246, 244, 239, .28); /* --color-rule-on-dark */
  --gdh-live: #2ea36a;            /* --color-live-dot */
  --gdh-font: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;

  --wall-bg: var(--gdh-surface);
  --wall-alert: var(--gdh-brand);
}

/* Bootstrap dark theme mapped onto the GDH tokens. */
[data-bs-theme="dark"] {
  --bs-body-font-family: var(--gdh-font);
  --bs-body-bg: var(--gdh-surface);
  --bs-body-bg-rgb: 38, 42, 51;
  --bs-body-color: var(--gdh-ink);
  --bs-body-color-rgb: 237, 237, 237;
  --bs-emphasis-color: #fff;
  --bs-secondary-color: var(--gdh-ink-muted);
  /* .text-secondary reads the rgb triplet, not --bs-secondary-color: keep it on the muted GDH ink. */
  --bs-secondary-rgb: 237, 237, 237;
  --bs-tertiary-bg: var(--gdh-panel);
  --bs-border-color: var(--gdh-rule);
  --bs-primary: var(--gdh-brand);
  --bs-primary-rgb: 204, 0, 0;
  --bs-link-color: var(--gdh-brand-on-dark);
  --bs-link-color-rgb: 255, 122, 122;
  --bs-link-hover-color: #fff;
  --bs-success-text-emphasis: #6fd3a0;
  --bs-warning-text-emphasis: var(--gdh-brand-on-dark);
  --bs-focus-ring-color: rgba(204, 0, 0, .45);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
}

body {
  font-family: var(--gdh-font);
  background-color: var(--wall-bg);
  color: var(--gdh-ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- video wall ---------- */

/* Phones: tiles stack at full width (big tiles too) and the page scrolls. The order comes from each tile's
   `order` (app.js): tiles are never moved in the DOM, since moving an iframe reloads it. */
.wall {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #000;
}

.wall-tile {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

/* From 576px up the wall always fills the viewport height: no band above or below. Columns, rows and the
   wall's width/height ratio come from grid.js (app.js sets the variables and each tile's grid area). The wall
   is as wide as cols × 16:9 cells, capped at the viewport: a wider screen (21:9) leaves bands left and right,
   a narrower one (16:10, 4:3) makes the cells a little taller and the player letterboxes inside the black tile. */
@media (min-width: 576px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .wall {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: repeat(var(--wall-cols, 4), minmax(0, 1fr));
    grid-template-rows: repeat(var(--wall-rows, 4), minmax(0, 1fr));
    gap: 0;
    height: 100vh;
    height: 100dvh;
    width: min(100vw, calc(100vh * var(--wall-ratio, 1.777778)));
    width: min(100vw, calc(100dvh * var(--wall-ratio, 1.777778)));
    margin: 0 auto;
  }

  .wall-tile {
    aspect-ratio: auto;
    min-width: 0;
    min-height: 0;
  }
}

.wall-tile > iframe,
.wall-tile > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  object-fit: contain;
}

/* Size control (1× → 2× → 3× → 1×): shown on hover/focus; always visible on touch screens, where a tap on
   the player never reaches the page. Hidden on phones, where every tile is full width anyway. */
/* Top-left: clear of the fixed settings toggle on the right edge and of the player's own top-right buttons. */
.tile-size {
  position: absolute;
  top: .4rem;
  left: .4rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: .95rem;
  line-height: 1;
  color: #fff;
  background: rgba(38, 42, 51, .82);
  border: 1px solid var(--gdh-rule);
  border-radius: 0;
  opacity: 0;
  transition: opacity .15s ease-out;
}

.wall-tile:hover .tile-size,
.tile-size:focus-visible {
  opacity: 1;
}

.tile-size:hover {
  background: var(--gdh-brand);
  border-color: var(--gdh-brand);
}

.tile-size:focus-visible {
  outline: 2px solid var(--gdh-brand);
  outline-offset: 1px;
}

@media (hover: none) {
  .tile-size { opacity: .75; }
}

@media (max-width: 575.98px) {
  .tile-size { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tile-size { transition: none; }
}

/* ---------- settings toggle ---------- */

.gear-btn {
  position: fixed;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  column-gap: .45rem;
  padding: .5rem .65rem;
  font-size: 1.25rem;
  line-height: 1;
  font-family: var(--gdh-font);
  font-weight: 500;
  color: var(--gdh-ink);
  background: rgba(43, 47, 55, .9);
  border: 1px solid var(--gdh-rule);
  border-right: 0;
  border-radius: 0;
  animation: gear-attention 1.2s ease-out 0s 5;
}

.gear-btn:hover,
.gear-btn:focus-visible {
  background: var(--gdh-panel);
  box-shadow: inset 3px 0 0 var(--gdh-brand);
}

.gear-btn:focus-visible {
  outline: 2px solid var(--gdh-brand);
  outline-offset: 2px;
}

.gear-btn-text {
  font-size: .9rem;
  display: inline-block;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: width .18s ease-out;
}

.gear-btn:hover .gear-btn-text,
.gear-btn:focus-visible .gear-btn-text {
  width: 4.2rem;
}

/* Draws the eye to the toggle on first load: a red glow that fades out. */
@keyframes gear-attention {
  0%   { box-shadow: 0 0 0 0 var(--wall-alert); background-color: var(--wall-alert); }
  45%  { background-color: var(--wall-alert); }
  100% { box-shadow: 0 0 0 .7rem rgba(204, 0, 0, 0); background-color: rgba(43, 47, 55, .9); }
}

@media (prefers-reduced-motion: reduce) {
  .gear-btn { animation: none; }
  .gear-btn-text { transition: none; }
}

/* ---------- settings panel ---------- */

#settings {
  --bs-offcanvas-bg: var(--gdh-panel);
  --bs-offcanvas-color: var(--gdh-ink);
  --bs-offcanvas-border-color: var(--gdh-rule);
  --bs-offcanvas-width: 440px;
}

@media (max-width: 575.98px) {
  #settings { --bs-offcanvas-width: 100vw; }
}

#settings .offcanvas-header {
  border-bottom: 1px solid var(--gdh-rule);
}

#settings .offcanvas-body {
  overflow-y: auto;
}

.brand-title {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: #fff;
}

.brand-logo {
  display: block;
  height: 22px;
  width: auto;
}

.brand-sep {
  width: 1px;
  height: 1.25rem;
  background: var(--gdh-rule);
}

#settings .text-secondary {
  color: var(--gdh-ink-muted) !important;
}

/* Fullscreen toggle: a borderless 32x32 icon button matching .btn-close beside it. */
#settings .fs-btn {
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  --bs-btn-color: #fff;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 1rem;
  line-height: 1;
  opacity: .5;
}

#settings .fs-btn:hover,
#settings .fs-btn:focus-visible {
  opacity: .75;
}

/* Undo / redo beside the "Kanallar" heading. */
#settings .icon-btn {
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  --bs-btn-color: var(--gdh-ink);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(237, 237, 237, .1);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(237, 237, 237, .16);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--gdh-ink);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-disabled-opacity: .3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: .95rem;
  line-height: 1;
}

/* Phones: no keyboard shortcut there, so give the buttons a full touch target. */
@media (max-width: 575.98px) {
  #settings .icon-btn {
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
  }
}

#settings .btn-close {
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#settings h6 {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gdh-ink-muted);
}

/* Red accent: active tile count, primary button, focus. */
#settings .btn {
  font-weight: 500;
}

#settings .btn-primary {
  --bs-btn-bg: var(--gdh-brand);
  --bs-btn-border-color: var(--gdh-brand);
  --bs-btn-hover-bg: #b30000;
  --bs-btn-hover-border-color: #b30000;
  --bs-btn-active-bg: var(--gdh-brand-dark);
  --bs-btn-active-border-color: var(--gdh-brand-dark);
  --bs-btn-disabled-bg: var(--gdh-brand);
  --bs-btn-disabled-border-color: var(--gdh-brand);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

#settings .btn-outline-light {
  --bs-btn-color: var(--gdh-ink);
  --bs-btn-border-color: var(--gdh-rule);
  --bs-btn-hover-bg: rgba(237, 237, 237, .1);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: rgba(237, 237, 237, .55);
  --bs-btn-active-bg: rgba(237, 237, 237, .16);
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: rgba(237, 237, 237, .55);
}

#settings .btn-outline-secondary {
  --bs-btn-color: var(--gdh-ink-muted);
  --bs-btn-border-color: var(--gdh-rule);
  --bs-btn-hover-bg: rgba(237, 237, 237, .1);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: rgba(237, 237, 237, .55);
}

#count-picker .btn.active {
  background-color: var(--gdh-brand);
  border-color: var(--gdh-brand);
  color: #fff;
  z-index: 2;
}

#settings .form-control,
#settings .form-select,
#settings .input-group-text {
  background-color: var(--gdh-surface);
  border-color: var(--gdh-rule);
  color: var(--gdh-ink);
}

#settings .form-control::placeholder {
  color: rgba(237, 237, 237, .4);
}

#settings .form-control:focus,
#settings .form-select:focus,
#settings .btn:focus-visible {
  border-color: var(--gdh-brand);
  box-shadow: 0 0 0 .2rem rgba(204, 0, 0, .35);
}

#settings hr {
  border-color: var(--gdh-rule);
  opacity: 1;
}

#form-status.text-success { color: #6fd3a0 !important; }
#form-status.text-warning { color: var(--gdh-brand-on-dark) !important; }

/* Size selector in a channel row: narrow, the name and source keep the width. */
#settings .chan-size {
  flex: 0 0 4.1rem;
  width: 4.1rem;
  padding-right: 1.6rem;
  background-position: right .4rem center;
}

/* Two-line channel row: grip, name, size and remove on top; the source address full width below. */
#settings .chan-row .chan-src {
  margin-top: -1px; /* shares the border with the line above */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Remove (trash) button: GDH red on hover. */
#settings .chan-del:hover,
#settings .chan-del:focus-visible {
  color: #fff;
  background-color: var(--gdh-brand);
  border-color: var(--gdh-brand);
}

/* A source that cannot be used: the row is skipped until it is fixed. */
#settings .chan-src.is-invalid {
  position: relative; /* above the neighbouring borders */
  z-index: 1;
  border-color: var(--gdh-brand-on-dark);
}

#settings .chan-src.is-invalid:focus {
  border-color: var(--gdh-brand-on-dark);
  box-shadow: 0 0 0 .2rem rgba(255, 122, 122, .3);
}

.chan-warn {
  margin-top: .2rem;
  font-size: .75rem;
  color: var(--gdh-brand-on-dark);
}

#settings .chan-row .input-group > :first-child { border-bottom-left-radius: 0; }
#settings .chan-row .input-group > :last-child { border-bottom-right-radius: 0; }

/* Shown while a ?ch= or /s/{id} layout is on screen. */
.shared-bar {
  padding: .75rem .9rem;
  background: rgba(204, 0, 0, .12);
  border-left: 3px solid var(--gdh-brand);
}

.chan-grip {
  cursor: grab;
  touch-action: none; /* dragging on touch screens must not scroll the panel */
}

.chan-row.ui-sortable-helper {
  background: var(--gdh-panel);
  box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .45);
}

.chan-row.ui-sortable-helper .chan-grip {
  cursor: grabbing;
}

.chan-drop {
  min-height: 2rem;
  margin-bottom: .5rem;
  border: 1px dashed var(--gdh-rule);
  background: rgba(255, 255, 255, .04);
}

.share-out {
  font-family: var(--bs-font-monospace);
  font-size: .8rem;
}

.toast-zone {
  z-index: 1090;
}

#toast {
  --bs-toast-bg: var(--gdh-panel);
  --bs-toast-color: var(--gdh-ink);
  border-left: 3px solid var(--gdh-brand) !important;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .4);
}

#toast .toast-action {
  --bs-btn-padding-x: .5rem;
  --bs-btn-color: var(--gdh-brand-on-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: rgba(237, 237, 237, .1);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: transparent;
  flex: none;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- confirm dialog (above the settings panel) ---------- */

#confirm-remove {
  --bs-modal-bg: var(--gdh-panel);
  --bs-modal-color: var(--gdh-ink);
  --bs-modal-border-color: var(--gdh-rule);
  --bs-modal-header-border-color: var(--gdh-rule);
  --bs-modal-footer-border-color: var(--gdh-rule);
  --bs-modal-border-radius: 0;
  --bs-modal-inner-border-radius: 0;
}

#confirm-remove .modal-title {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

#confirm-remove .btn {
  font-weight: 500;
}

#confirm-remove .btn-outline-light {
  --bs-btn-color: var(--gdh-ink);
  --bs-btn-border-color: var(--gdh-rule);
  --bs-btn-hover-bg: rgba(237, 237, 237, .1);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: rgba(237, 237, 237, .55);
}

#confirm-remove .btn-danger {
  --bs-btn-bg: var(--gdh-brand);
  --bs-btn-border-color: var(--gdh-brand);
  --bs-btn-hover-bg: #b30000;
  --bs-btn-hover-border-color: #b30000;
  --bs-btn-active-bg: var(--gdh-brand-dark);
  --bs-btn-active-border-color: var(--gdh-brand-dark);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

#confirm-remove .btn:focus-visible {
  box-shadow: 0 0 0 .2rem rgba(204, 0, 0, .35);
}

/* ---------- keyboard / TV remote (tv.js) ---------- */

/* A tile with a channel is focusable. The focus ring is drawn above the player (a ring on the tile itself would
   sit under the iframe): 4px GDH red inside the tile, so nothing moves. */
.wall-tile {
  outline: none;
}

.wall-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow: inset 0 0 0 4px var(--gdh-brand);
  opacity: 0;
}

.wall-tile:focus-visible::after,
body.kbd .wall-tile:focus::after,
body.tv .wall-tile:focus::after,
.wall-tile.is-active::after {
  opacity: 1;
}

/* Channel name at the bottom of the focused tile. */
.tile-label {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  z-index: 3;
  padding: 1.2rem .6rem .35rem;
  overflow: hidden;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .78));
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease-out;
}

.wall-tile:focus-visible .tile-label,
body.kbd .wall-tile:focus .tile-label,
body.tv .wall-tile:focus .tile-label,
.wall-tile.is-active .tile-label,
.wall-tile.show-label .tile-label {
  opacity: 1;
}

/* Hover-only controls also show with keyboard / remote focus (not after a mouse click). */
.wall-tile:focus-visible .tile-size,
body.kbd .wall-tile:focus .tile-size,
body.kbd .wall-tile:focus-within .tile-size,
body.tv .wall-tile:focus .tile-size,
body.tv .wall-tile:focus-within .tile-size {
  opacity: 1;
}

/* The tile with sound on. */
.tile-sound {
  position: absolute;
  top: .4rem;
  right: .4rem;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 1.05rem;
  color: #fff;
  background: var(--gdh-brand);
  pointer-events: none;
}

.wall-tile.has-sound .tile-sound {
  display: inline-flex;
}

/* Full tile: CSS only, the player keeps playing (no DOM move, no reload). */
.wall-tile.is-full {
  position: fixed;
  inset: 0;
  z-index: 1035;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  aspect-ratio: auto;
}

.wall-tile.is-full::after {
  opacity: 0 !important;
}

body.tile-full-on .gear-btn {
  visibility: hidden;
}

/* Tile menu (OK on a tile). */
.tile-menu {
  position: fixed;
  z-index: 1036;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 15rem;
  padding: .5rem;
  font-family: var(--gdh-font);
  background: var(--gdh-panel);
  border: 1px solid var(--gdh-rule);
  border-left: 3px solid var(--gdh-brand);
  box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .55);
}

.tile-menu[hidden] {
  display: none;
}

.tile-menu-title {
  max-width: 18rem;
  padding: .25rem .75rem .4rem;
  overflow: hidden;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--gdh-ink-muted);
}

.tile-menu-item {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 3rem;
  padding: .5rem 1rem;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 500;
  text-align: left;
  color: var(--gdh-ink);
  background: transparent;
  border: 0;
  border-radius: 0;
}

.tile-menu-item i {
  width: 1.4rem;
  font-size: 1.2rem;
  text-align: center;
}

.tile-menu-item:hover,
.tile-menu-item:focus {
  color: #fff;
  background: var(--gdh-brand);
  outline: none;
}

.tile-menu-item[data-action="remove"]:not(:hover):not(:focus) {
  color: var(--gdh-brand-on-dark);
}

/* Row move buttons: for the remote (TV mode); with a keyboard Alt+↑/↓ does the same. */
#settings .chan-move {
  display: none;
}

/* Strong focus ring in the panel and dialog with the keyboard / remote. */
body.kbd #settings :focus-visible,
body.tv #settings :focus-visible,
body.kbd #confirm-remove :focus-visible,
body.tv #confirm-remove :focus-visible {
  outline: 3px solid var(--gdh-brand);
  outline-offset: 1px;
}

/* ---------- TV mode ---------- */

/* The cursor hides only while the remote's keys are in use: TV browsers with an on-screen pointer (moved by the
   D-pad) keep it visible, since moving it ends keyboard mode. */
body.tv.kbd,
body.tv.kbd * {
  cursor: none !important;
}

/* With the panel open the page itself scrolls (not only the panel body), on every device: pointer-style TV
   browsers scroll the document when the cursor reaches the screen edge and never an inner scroll box, and they
   are often not detected as TVs. The header stays on top while the page scrolls. */
html.panel-page,
html.panel-page body {
  height: auto;
  overflow-y: auto;
}

/* Instant jumps: Bootstrap's smooth scrolling lags on TV hardware and each remote press scrolls again. */
html.panel-page {
  scroll-behavior: auto;
}

html.panel-page #settings {
  position: absolute;
  bottom: auto;
  height: auto;
  min-height: 100vh;
}

html.panel-page #settings .offcanvas-body {
  overflow: visible;
  flex: none;
}

html.panel-page #settings .offcanvas-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--gdh-panel);
}

/* Players never take focus or clicks: all interaction goes through the tile. */
body.tv .wall-tile > iframe,
body.tv .wall-tile > video {
  pointer-events: none;
}

body.tv .tile-label {
  font-size: 1.15rem;
}

body.tv .wall-tile.is-full .tile-label {
  left: 2rem;
  right: auto;
  bottom: 2rem;
  padding: .6rem 1.2rem;
  font-size: 1.6rem;
  background: rgba(38, 42, 51, .85);
  border-left: 4px solid var(--gdh-brand);
}

body.tv .tile-menu-item {
  min-height: 3.5rem;
  font-size: 1.3rem;
}

body.tv .gear-btn {
  font-size: 1.6rem;
  padding: .7rem .8rem;
}

body.tv #settings {
  --bs-offcanvas-width: 520px;
}

body.tv #settings .offcanvas-header,
body.tv #settings .offcanvas-body {
  font-size: 1.15rem;
}

body.tv #settings h6 {
  font-size: .9rem;
}

body.tv #settings .btn,
body.tv #settings .form-control,
body.tv #settings .form-select,
body.tv #settings .input-group-text {
  --bs-btn-font-size: 1.15rem;
  min-height: 48px;
  font-size: 1.15rem;
}

body.tv #settings .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.tv #settings .icon-btn,
body.tv #settings .fs-btn,
body.tv #settings .btn-close {
  width: 48px;
  height: 48px;
}

body.tv #settings .chan-size {
  flex-basis: 5rem;
  width: 5rem;
}

body.tv #settings .chan-move {
  display: inline-flex;
  flex: 0 0 48px;
  width: 48px;
  padding: 0;
}

body.tv #settings .chan-grip {
  display: none; /* dragging is impossible with a remote */
}

.order-help-tv,
body.tv #settings .order-help-desk {
  display: none;
}

body.tv #settings .order-help-tv {
  display: inline;
}

body.tv #settings .chan-warn,
body.tv #settings .share-out {
  font-size: 1rem;
}

body.tv .tv-switch .form-check-input {
  width: 3em;
  height: 1.5em;
}

body.tv #confirm-remove .modal-dialog {
  --bs-modal-width: 440px;
}

body.tv #confirm-remove .modal-title {
  font-size: 1.3rem;
}

body.tv #confirm-remove .modal-body {
  font-size: 1.15rem;
}

body.tv #confirm-remove .btn {
  min-height: 48px;
  padding-inline: 1.25rem;
  font-size: 1.15rem;
}

/* Toasts: bottom of the screen, large. */
body.tv .toast-zone {
  padding-bottom: 2.5rem !important;
}

body.tv #toast {
  width: min(92vw, 760px);
  font-size: 1.35rem;
}

body.tv #toast .toast-body {
  padding: 1rem 1.25rem;
}

#settings .tv-switch .form-check-input:checked {
  background-color: var(--gdh-brand);
  border-color: var(--gdh-brand);
}

#settings .tv-switch .form-check-input:focus {
  border-color: var(--gdh-brand);
  box-shadow: 0 0 0 .2rem rgba(204, 0, 0, .35);
}

@media (prefers-reduced-motion: reduce) {
  .tile-label { transition: none; }
}