/* ==========================================================
   BARCO NORMAL-SCREEN FIT
   Keeps the landscape appearance without overflowing at 100%.
   ========================================================== */

html {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

body {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 28px 16px 60px !important;
    overflow-x: hidden !important;
}

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

/*
 * Main cabinet:
 * wide enough to look impressive, but never wider than the viewport.
 */

#barcoRealCabinet {
    width: min(1420px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;

    margin-top: 58px !important;
    margin-right: auto !important;
    margin-bottom: 36px !important;
    margin-left: auto !important;

    padding-top: 42px !important;
    padding-right: clamp(16px, 2vw, 34px) !important;
    padding-bottom: 72px !important;
    padding-left: clamp(16px, 2vw, 34px) !important;

    border-width: 8px !important;
    border-radius: 18px 18px 12px 12px !important;

    overflow: visible !important;
}

/* Keep the lid inside the cabinet width. */

#barcoRealCabinet::before {
    right: 2% !important;
    left: 2% !important;
    height: 67px !important;
}

/* Keep the bottom control rail inside the cabinet. */

#barcoRealCabinet::after {
    right: 16px !important;
    left: 16px !important;
    height: 44px !important;
}

/* Smaller, proportional BARCO nameplate. */

#barcoRealNameplate {
    top: 10px !important;
    width: min(520px, 48%) !important;
    min-width: 330px !important;
    max-width: calc(100% - 80px) !important;
    padding: 7px 18px !important;
}

#barcoRealNameplate strong {
    font-size: clamp(22px, 2.2vw, 31px) !important;
}

#barcoRealNameplate span {
    margin-top: 2px !important;
    font-size: 7px !important;
}

/* Inner wood and faceplate. */

#barcoRealInner {
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    border-width: 6px !important;
}

/* Decorative speaker area remains broad but not oversized. */

#barcoRealSpeakerCloth {
    top: 62px !important;
    right: 3% !important;
    left: 3% !important;
    height: 94px !important;
    border-width: 6px !important;
}

/* Pull the working interface upward. */

#barcoRealContent {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin-top: 109px !important;
    padding: 12px !important;

    overflow: hidden !important;
}

/* Remove old width restrictions inside the cabinet. */

#barcoRealContent > *,
#barcoRealContent main,
#barcoRealContent section,
#barcoRealContent header,
#barcoRealContent footer,
#barcoRealContent .page,
#barcoRealContent .wrapper,
#barcoRealContent .site-wrapper,
#barcoRealContent .container,
#barcoRealContent .content,
#barcoRealContent .radio-shell,
#barcoRealContent .radio-console,
#barcoRealContent .receiver,
#barcoRealContent .receiver-shell,
#barcoRealContent .console,
#barcoRealContent .radio-body,
#barcoRealContent .radio,
#barcoRealContent .radio-inner,
#barcoRealContent .receiver-inner {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

/*
 * Main working receiver:
 * compact landscape proportions that fit a standard monitor.
 */

#barcoRealContent .radio-grid,
#barcoRealContent .receiver-grid,
#barcoRealContent .console-grid,
#barcoRealContent .radio-layout,
#barcoRealContent .receiver-layout {
    display: grid !important;

    grid-template-columns:
        minmax(150px, 0.72fr)
        minmax(0, 3.65fr)
        minmax(190px, 1.05fr) !important;

    gap: 11px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* Left speaker and signal meter. */

#barcoRealContent .speaker,
#barcoRealContent .speaker-panel,
#barcoRealContent .left-column,
#barcoRealContent .radio-speaker {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 205px !important;
    padding: 10px !important;
}

/* Center radio controls use the remaining width. */

#barcoRealContent .station-panel,
#barcoRealContent .main-panel,
#barcoRealContent .receiver-main,
#barcoRealContent .center-column,
#barcoRealContent .radio-main {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* Right station-selection column. */

#barcoRealContent .control-panel,
#barcoRealContent .right-column,
#barcoRealContent .station-controls,
#barcoRealContent .receiver-controls {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 245px !important;
    padding: 10px !important;
}

/* Prevent long station names from expanding the page. */

#barcoRealContent select,
#barcoRealContent option,
#barcoRealContent button,
#barcoRealContent input,
#barcoRealContent .station-name,
#barcoRealContent .station-title,
#barcoRealContent .now-playing {
    min-width: 0 !important;
    max-width: 100% !important;
}

#barcoRealContent select,
#barcoRealContent button {
    width: 100% !important;
}

/* Compact the large station display. */

#barcoRealContent .station-display,
#barcoRealContent .display,
#barcoRealContent .digital-display,
#barcoRealContent .now-playing,
#barcoRealContent .tuner-display,
#barcoRealContent .frequency-display {
    width: 100% !important;
    min-height: 88px !important;
    max-height: 125px !important;
    padding: 13px 16px !important;
    overflow: hidden !important;
}

#barcoRealContent .station-display h1,
#barcoRealContent .station-display h2,
#barcoRealContent .station-display .station-name,
#barcoRealContent .display h1,
#barcoRealContent .display h2,
#barcoRealContent .now-playing h1,
#barcoRealContent .now-playing h2 {
    max-width: 100% !important;
    margin: 3px 0 !important;

    font-size: clamp(20px, 2.25vw, 38px) !important;
    line-height: 1.05 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Shorter spectrum section. */

#barcoRealContent .spectrum,
#barcoRealContent .waveform,
#barcoRealContent .visualizer,
#barcoRealContent canvas {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 145px !important;
    max-height: 145px !important;
}

/* Compact play controls and status bars. */

#barcoRealContent button,
#barcoRealContent .button,
#barcoRealContent .btn {
    min-height: 34px !important;
    padding: 7px 10px !important;
    font-size: 10px !important;
}

#barcoRealContent select,
#barcoRealContent input[type="text"],
#barcoRealContent input[type="search"] {
    min-height: 34px !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
}

/* Captions stay useful without making the cabinet excessively tall. */

#barcoRealContent .caption-panel,
#barcoRealContent .captions-panel,
#barcoRealContent .caption-box,
#barcoRealContent #captions {
    width: 100% !important;
    max-width: none !important;
    padding: 10px !important;
}

#barcoRealContent .caption-output,
#barcoRealContent .captions-output,
#barcoRealContent .caption-text,
#barcoRealContent #captionOutput {
    min-height: 78px !important;
    max-height: 130px !important;
    overflow-y: auto !important;
}

/* Signal meter stays readable but compact. */

#la911FinalSignalMeter {
    width: 100% !important;
    max-width: 190px !important;
    margin: 10px auto 0 !important;
}

#la911FinalSignalMeter .la911-meter-heading {
    font-size: 8px !important;
}

.la911-meter-readouts {
    gap: 3px !important;
}

.la911-meter-readouts div {
    padding: 4px 1px !important;
}

.la911-meter-readouts strong {
    font-size: 9px !important;
}

.la911-visitor-ip-box {
    margin-top: 5px !important;
    padding: 5px !important;
    font-size: 7px !important;
}

/*
 * Region bank:
 * six columns on a normal desktop, rather than stretching
 * every button across the entire display.
 */

#barcoRealContent .region-grid,
#barcoRealContent .regions-grid,
#barcoRealContent .region-buttons {
    display: grid !important;
    grid-template-columns:
        repeat(6, minmax(0, 1fr)) !important;

    gap: 7px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

#barcoRealContent .region-card,
#barcoRealContent .region-button,
#barcoRealContent .region-option,
#barcoRealContent .monitor-card,
#barcoRealContent .country-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 7px 8px !important;
    overflow: hidden !important;
}

#barcoRealContent .region-card *,
#barcoRealContent .region-button *,
#barcoRealContent .region-option *,
#barcoRealContent .monitor-card *,
#barcoRealContent .country-card * {
    max-width: 100% !important;
    font-size: 9px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Bottom decorative controls. */

#barcoRealKeys {
    bottom: 17px !important;
    gap: 6px !important;
}

#barcoRealKeys span {
    width: 36px !important;
    height: 20px !important;
}

.barcoRealKnob {
    bottom: 8px !important;
    width: 47px !important;
    height: 47px !important;
}

/* Common 1366–1600 pixel desktop screens. */

@media (max-width: 1500px) {
    #barcoRealCabinet {
        width: min(1280px, calc(100vw - 26px)) !important;
        max-width: calc(100vw - 26px) !important;
    }

    #barcoRealContent .radio-grid,
    #barcoRealContent .receiver-grid,
    #barcoRealContent .console-grid,
    #barcoRealContent .radio-layout,
    #barcoRealContent .receiver-layout {
        grid-template-columns:
            minmax(145px, 0.7fr)
            minmax(0, 3.35fr)
            minmax(180px, 1fr) !important;
    }

    #barcoRealContent .region-grid,
    #barcoRealContent .regions-grid,
    #barcoRealContent .region-buttons {
        grid-template-columns:
            repeat(5, minmax(0, 1fr)) !important;
    }
}

/* Laptop layout. */

@media (max-width: 1050px) {
    body {
        padding-right: 7px !important;
        padding-left: 7px !important;
    }

    #barcoRealCabinet {
        width: calc(100vw - 14px) !important;
        max-width: calc(100vw - 14px) !important;

        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    #barcoRealContent .radio-grid,
    #barcoRealContent .receiver-grid,
    #barcoRealContent .console-grid,
    #barcoRealContent .radio-layout,
    #barcoRealContent .receiver-layout {
        grid-template-columns:
            minmax(130px, 0.75fr)
            minmax(0, 2.8fr)
            minmax(170px, 1fr) !important;

        gap: 7px !important;
    }

    #barcoRealContent .region-grid,
    #barcoRealContent .regions-grid,
    #barcoRealContent .region-buttons {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Tablet and phone stack normally. */

@media (max-width: 760px) {
    body {
        padding: 10px 4px 40px !important;
    }

    #barcoRealCabinet {
        width: calc(100vw - 8px) !important;
        max-width: calc(100vw - 8px) !important;
        margin-top: 48px !important;
        padding-right: 7px !important;
        padding-left: 7px !important;
        border-width: 4px !important;
    }

    #barcoRealNameplate {
        min-width: 75% !important;
    }

    #barcoRealSpeakerCloth {
        height: 75px !important;
    }

    #barcoRealContent {
        margin-top: 91px !important;
        padding: 6px !important;
    }

    #barcoRealContent .radio-grid,
    #barcoRealContent .receiver-grid,
    #barcoRealContent .console-grid,
    #barcoRealContent .radio-layout,
    #barcoRealContent .receiver-layout {
        display: block !important;
    }

    #barcoRealContent .speaker,
    #barcoRealContent .speaker-panel,
    #barcoRealContent .left-column,
    #barcoRealContent .radio-speaker,
    #barcoRealContent .control-panel,
    #barcoRealContent .right-column,
    #barcoRealContent .station-controls,
    #barcoRealContent .receiver-controls {
        width: 100% !important;
        max-width: none !important;
    }

    #barcoRealContent .region-grid,
    #barcoRealContent .regions-grid,
    #barcoRealContent .region-buttons {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}