/* Local responsive layout. No changes to packaged OpenWebRX assets. */
:root { --sdr-header-height: 67px; --sdr-view-height: 100dvh; }
.webrx-top-bar { height:auto; min-height:67px; flex-wrap:wrap; justify-content:flex-start; overflow:visible; }
.webrx-top-bar > a { flex:0 0 auto; }
.webrx-top-bar .webrx-rx-avatar { flex:0 0 auto; }
.webrx-rx-texts { min-width:180px; width:auto; flex:1 1 210px; }
.webrx-rx-texts h1,.webrx-rx-texts div { white-space:normal; overflow-wrap:anywhere; }
.openwebrx-main-buttons { flex:0 1 auto; flex-wrap:wrap; gap:4px; box-sizing:border-box; max-width:100%; margin-left:auto; }
.openwebrx-main-buttons .button { width:auto; min-width:58px; padding:0 4px; box-sizing:border-box; }
#pstt { max-width:100%; overflow-wrap:anywhere; margin:0; }
#openwebrx-panels-container-right { max-width:100%; }
#openwebrx-panel-receiver { flex-shrink:0; max-width:calc(100vw - 36px); max-height:calc(var(--sdr-view-height) - var(--sdr-header-height) - 76px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.openwebrx-panel { max-width:calc(100vw - 36px); }
#openwebrx-panels-container-left { max-height:calc(var(--sdr-view-height) - var(--sdr-header-height) - 76px); }
#openwebrx-panels-container-left > .openwebrx-panel { flex-shrink:0; }
#openwebrx-panel-receiver select { max-width:100%; }
.openwebrx-plugin-window { max-width:calc(100vw - 16px); max-height:calc(var(--sdr-view-height) - var(--sdr-header-height) - 16px); }
.login { width:calc(100% - 32px); max-width:500px; box-sizing:border-box; }
.login-container { min-height:380px; }
.sdr-table-scroll { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:1rem; }
.sdr-table-scroll:focus-visible { outline:2px solid #80bdff; }
.sdr-table-scroll > table { margin-bottom:0; }
table.features { table-layout:fixed; min-width:540px; width:100%; }
table.features th:first-child { width:23%; }
table.features th:last-child { width:14%; }
table.features td { overflow-wrap:anywhere; }
table.features pre { white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
.container pre { max-width:100%; overflow:auto; }
.settings-section,.form-group > div,.removable-item,.add-group-select { min-width:0; }
.settings-grid .btn { white-space:normal; height:auto; min-height:100px; overflow-wrap:anywhere; }
.buttons { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; padding-bottom:max(10px,env(safe-area-inset-bottom)); }
.buttons .btn { white-space:normal; }
[data-sdr-language-switch] { bottom:max(12px,env(safe-area-inset-bottom)) !important; }
body:has(.buttons) [data-sdr-language-switch] { bottom:calc(var(--sdr-footer-height,70px) + 8px) !important; }
@media (max-width:991px) {
 .webrx-top-logo { display:none; }
 .settings-grid > .col-4 { flex:0 0 50%; max-width:50%; }
}
@media (max-width:767px) {
 .webrx-top-bar { min-height:0; }
 .webrx-rx-texts { flex:1 1 180px; min-width:0; }
 .webrx-rx-texts h1 { font-size:14px; }
 .webrx-rx-texts div { font-size:12px; }
 .openwebrx-main-buttons { flex:1 0 100%; width:100%; justify-content:space-evenly; margin:0; padding:5px 4px 10px; gap:3px; }
 .openwebrx-main-buttons .button { flex:1 1 44px; min-width:44px; max-width:90px; font-size:11px; padding:3px 2px; overflow-wrap:anywhere; }
 .openwebrx-main-buttons .button img,.openwebrx-main-buttons .button svg { height:28px; }
 .container { width:100%; max-width:100%; padding-left:12px; padding-right:12px; }
 .container h1 { font-size:1.6rem; overflow-wrap:anywhere; }
 .settings-section h3 { font-size:1.3rem; overflow-wrap:anywhere; }
 .settings-section .form-group.row > .col-3,
 .settings-section .form-group.row > .col-9 { flex:0 0 100%; max-width:100%; }
 .form-control { min-width:0; max-width:100%; font-size:16px; }
 .settings-grid > div { padding:10px; }
 .breadcrumb,.nav-tabs { flex-wrap:wrap; overflow-wrap:anywhere; }
 .q65-matrix { overflow-x:auto; }
 .file-tile { width:100%; }
 #openwebrx-panel-receiver { width:259px; padding:8px; margin:4px; max-width:calc(100vw - 28px); }
 #openwebrx-panel-log { max-height:26dvh; overflow:auto; }
 #openwebrx-panels-container-left > .openwebrx-panel { max-height:30dvh; overflow:auto; }
 .openwebrx-modes-grid .openwebrx-demodulator-button { min-height:28px; display:flex; align-items:center; justify-content:center; }
 .openwebrx-section-divider { min-height:28px; display:flex; align-items:center; }
 .openwebrx-plugin-window { left:8px !important; right:auto !important; }
 .login { padding:16px; }
}
@media (max-width:479px) {
 .settings-grid > .col-4 { flex:0 0 100%; max-width:100%; }
 .settings-grid .btn { min-height:70px; padding:15px; }
 .scheduler-static-time-inputs { flex-wrap:wrap; }
 .scheduler-static-time-inputs > * { max-width:100%; }
}
@media (max-height:500px) and (min-width:600px) {
 .webrx-top-bar { min-height:48px; }
 .webrx-rx-avatar { width:30px; height:30px; margin:4px; }
 .webrx-top-logo { width:180px; padding:6px; }
 .openwebrx-main-buttons .button img,.openwebrx-main-buttons .button svg { height:24px; }
}

#openwebrx-panel-receiver .openwebrx-plugin-stack { position:static; flex-direction:row; flex-wrap:wrap; margin:0; gap:5px; }

@media (max-width:767px) { .openwebrx-main-buttons .button { flex-basis:60px; max-width:none; } }

@media (max-width:767px) {
 .openwebrx-main-buttons { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
 .openwebrx-main-buttons .button { min-width:0; width:100%; }
 body:has(#openwebrx-panel-receiver) [data-sdr-language-switch] { left:12px !important; right:auto !important; }
}

body:has(#openwebrx-panel-receiver) [data-sdr-language-switch] {
 left:12px !important; right:auto !important; bottom:auto !important;
 top:calc(var(--sdr-header-height) + 80px) !important;
}

/* Keep paired receiver controls aligned even when a vertical scrollbar appears. */
#openwebrx-panel-receiver .openwebrx-panel-line:has(> .openwebrx-panel-slider) {
 display:grid;
 grid-template-columns:24px minmax(0,1fr) 24px minmax(0,1fr);
 column-gap:4px;
 align-items:center;
 width:100%;
 box-sizing:border-box;
}
#openwebrx-panel-receiver .openwebrx-panel-line > .openwebrx-panel-slider,
#openwebrx-panel-receiver .openwebrx-panel-line:has(> .openwebrx-panel-slider) > select {
 width:100%; min-width:0; max-width:100%; box-sizing:border-box;
 margin:0; top:0;
}
#openwebrx-panel-receiver .openwebrx-panel-line:has(> .openwebrx-panel-slider) > .openwebrx-slider-button {
 width:24px; min-width:0; box-sizing:border-box; margin:0;
 display:flex; align-items:center; justify-content:center; padding:4px;
}
#openwebrx-panel-receiver .openwebrx-slider-button svg {
 width:14px; height:14px; flex-shrink:0;
}
#openwebrx-panel-receiver #openwebrx-smeter { width:100%; box-sizing:border-box; }