/* Radio Wierzchlas — wspólna warstwa mobilna wszystkich podstron */
html,
body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
audio,
video {
  max-width: 100%;
}

.topbar,
.topbar-main,
.brand,
.top-actions,
.topbar nav,
.container,
.panel,
.card,
.page-title,
.section-title,
.section-head,
.hero-grid,
.two-col,
.control-grid,
.status-grid,
.form-grid,
.user-grid,
.tool-grid,
.api-tabs,
.quick-line,
.field-row,
.insert-box,
.request-add,
.button-row,
.actions,
.chips,
.v10-container,
.v10-card,
.v10-card-head,
.v10-header,
.v10-live-grid,
.v10-connect,
.v10-live-buttons,
.v10-audio-grid,
.v12-listen-grid,
.v12-return-publisher-grid,
.v12-return-actions,
.v12-return-details,
.v13-routing-grid,
.v13-presenter,
.v13-presenter-copy,
.v10-now-grid,
.v11-mixbar,
.v10-queue-head {
  min-width: 0;
}

.brand span,
.brand b,
.brand small,
.nav-pill,
.topbar nav a,
.connection,
.hint,
.muted,
.alert,
.user-card,
.user-card h3,
.user-card span,
.playlist,
.playlist li,
#requests,
.v10-notice,
.v10-endpoint,
.v10-endpoint strong,
.v10-endpoint span,
.v12-return-details strong,
.v12-return-details span {
  overflow-wrap: anywhere;
}

input,
select,
textarea,
button {
  max-width: 100%;
  font: inherit;
}

input,
select,
textarea {
  min-width: 0;
}

.mobile-menu-toggle {
  display: none;
}

.rw-mobile-only {
  display: none;
}

.users-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.users-list-toolbar > div {
  min-width: 0;
}

.user-editor-panel[hidden] {
  display: none !important;
}

.user-editor-panel {
  scroll-margin-top: 16px;
}

.user-editor-panel h2 {
  margin-top: 0;
}

@media (max-width: 900px) {
  body {
    min-width: 0;
  }

  .topbar {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding:
      10px
      max(10px, env(safe-area-inset-right, 0px))
      10px
      max(10px, env(safe-area-inset-left, 0px)) !important;
  }

  .topbar-main {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .topbar-main .brand,
  .topbar > .brand {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .brand .logo {
    flex: 0 0 auto;
  }

  .brand span {
    flex: 1 1 auto;
    min-width: 0;
  }

  .mobile-menu-toggle {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 48px;
    min-height: 48px;
    padding: 8px 11px;
    border-radius: 10px;
    cursor: pointer;
  }

  .mobile-menu-toggle > span[aria-hidden="true"] {
    font-size: 1.35rem;
    line-height: 1;
  }

  .top-actions,
  .topbar nav {
    display: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .top-actions.mobile-menu-open,
  .topbar nav.mobile-menu-open {
    display: grid !important;
  }

  .top-actions > *,
  .topbar nav > * {
    min-width: 0;
  }

  .connection {
    grid-column: 1 / -1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 44px;
    padding: 8px 10px !important;
    white-space: normal !important;
    text-align: center;
  }

  .nav-pill,
  .topbar nav a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 48px;
    padding: 10px 12px !important;
    text-align: center;
    white-space: normal !important;
    line-height: 1.25;
  }

  .container,
  .live-container,
  .v10-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding:
      14px
      max(10px, env(safe-area-inset-right, 0px))
      24px
      max(10px, env(safe-area-inset-left, 0px)) !important;
  }

  .page-title,
  .panel,
  .card,
  .v10-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hero-grid,
  .two-col,
  .status-grid,
  .form-grid,
  .user-grid,
  .tool-grid,
  .v10-header,
  .v10-live-grid,
  .v10-connect,
  .v10-audio-grid,
  .v12-listen-grid,
  .v12-return-publisher-grid,
  .v12-return-details,
  .v13-routing-grid,
  .v10-now-grid,
  .v11-mixbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .control-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .section-title,
  .section-head,
  .v10-card-head,
  .v10-queue-head,
  .users-list-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .section-title > *,
  .section-head > *,
  .v10-card-head > *,
  .v10-queue-head > *,
  .users-list-toolbar > * {
    min-width: 0;
    max-width: 100%;
  }

  .button-row,
  .actions,
  .insert-box,
  .request-add,
  .field-row > div,
  .quick-line,
  .v12-return-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .quick-line > label {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    width: 100%;
  }

  .api-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .button-row > *,
  .actions > *,
  .actions form,
  .insert-box > *,
  .request-add > *,
  .field-row > div > *,
  .quick-line button,
  .v12-return-actions > *,
  .api-tabs > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  .actions form button {
    width: 100% !important;
  }

  .chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .user-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .user-head {
    min-width: 0;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    width: 100% !important;
  }

  input[type="range"] {
    width: 100% !important;
  }

  .big-control,
  .button,
  button,
  select {
    min-height: 48px;
  }

  .playlist,
  #requests {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .v12-return-details > div {
    min-width: 0;
  }

  .v10-help,
  .v11-help {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }
}

@media (max-width: 560px) {
  .top-actions,
  .top-actions.mobile-menu-open,
  .topbar nav,
  .topbar nav.mobile-menu-open,
  .api-tabs {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .mobile-menu-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .control-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .container,
  .live-container,
  .v10-container {
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
  }

  .panel,
  .card,
  .v10-card {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  h1 {
    overflow-wrap: anywhere;
  }
}

@media (pointer: coarse) and (max-width: 900px) {
  button,
  .button,
  .nav-pill,
  .topbar nav a,
  select {
    min-height: 48px;
  }

  input[type="range"] {
    min-height: 44px;
  }
}