/* =========================================================
   PAREACLUB ANDROID PORTRAIT HOTFIX V2.2
   ΜΟΝΟ για Android / tablet portrait
   Δεν επηρεάζει desktop
========================================================= */
@media screen and (max-width: 768px) and (orientation: portrait) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    body {
        min-height: 100dvh;
    }

    /* -----------------------------------------------------
       TOP HEADER
       Να μένει ορατό και να χωράει τα επάνω κουμπιά
    ----------------------------------------------------- */
    header,
    .header,
    .topbar,
    .top-bar {
        position: sticky !important;
        top: 0 !important;
        z-index: 2500 !important;

        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;

        padding: 6px !important;
    }

    header button,
    .header button,
    .topbar button,
    .top-bar button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: 34px !important;
        padding: 0 10px !important;
        white-space: nowrap !important;
    }

    /* Αν κάποια από αυτά κρύβονται από παλιότερο mobile css */
    #logoutBtn,
    #settingsBtn,
    #djPlayerBtn,
    #toggleDjPlayerBtn,
    #openDjPlayerBtn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* -----------------------------------------------------
       MAIN 3-ΣΤΗΛΟ όπως στο PC, αλλά σωστά προσαρμοσμένο
    ----------------------------------------------------- */
    main {
        display: grid !important;
        grid-template-columns: 24% 48% 28% !important;
        gap: 6px !important;

        width: 100% !important;
        min-height: calc(100dvh - 120px) !important;
        height: calc(100dvh - 120px) !important;

        padding: 6px !important;
        box-sizing: border-box !important;
        align-items: stretch !important;
    }

    .left,
    .center,
    .right {
        min-width: 0 !important;
        min-height: 0 !important;
        height: 100% !important;
    }

    /* -----------------------------------------------------
       ΑΡΙΣΤΕΡΗ ΣΤΗΛΗ
       πάνω = δωμάτια
       κάτω = μικρότερη κάμερα
    ----------------------------------------------------- */
    .left {
        display: grid !important;
        grid-template-rows: minmax(0, 1fr) 185px !important;
        gap: 6px !important;
        align-content: stretch !important;
    }

    .left .panel:first-child,
    .left #roomList {
        min-height: 0 !important;
        overflow: auto !important;
    }

    .left .camera-panel,
    #myCameraPanel,
    .left .panel:last-child {
        min-height: 185px !important;
        max-height: 185px !important;
        height: 185px !important;

        overflow: hidden !important;
        align-self: end !important;
    }

    .left .camera-panel .panel-body,
    #myCameraPanel .panel-body,
    .left .camera-panel .camera-box,
    .left .camera-panel .camera-preview,
    .left .camera-panel video,
    #myCameraPanel video {
        height: auto !important;
        max-height: 105px !important;
        min-height: 0 !important;
        object-fit: cover !important;
    }

    /* Να μην φαίνεται η άσχημη μακριά μπάρα */
    .left .camera-panel input[type="range"],
    #myCameraPanel input[type="range"] {
        display: none !important;
    }

    /* -----------------------------------------------------
       ΚΕΝΤΡΙΚΗ ΣΤΗΛΗ
    ----------------------------------------------------- */
    .center {
        display: grid !important;
        grid-template-rows: auto 1fr auto auto !important;
        gap: 4px !important;
        min-height: 0 !important;
    }

    .center .panel,
    .chat-panel,
    .center section {
        min-height: 0 !important;
        height: 100% !important;
    }

    #messages {
        min-height: 0 !important;
        overflow-y: auto !important;
    }

    .toolbar {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .toolbar button,
    .toolbar select {
        height: 30px !important;
        max-width: 100% !important;
        font-size: 11px !important;
    }

    #form {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 6px !important;
        align-items: center !important;
    }

    #form input,
    #input {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* -----------------------------------------------------
       ΔΕΞΙΑ ΣΤΗΛΗ
       πάνω = χρήστες
       κάτω = radio
    ----------------------------------------------------- */
    .right {
        display: grid !important;
        grid-template-rows: minmax(0, 1fr) 165px !important;
        gap: 6px !important;
        min-height: 0 !important;
    }

    .right .users-panel,
    #usersListUI,
    .right .panel:first-child {
        min-height: 0 !important;
        overflow: auto !important;
    }

    .right .radio-panel,
    #radioPanel,
    .right .panel:last-child {
        min-height: 165px !important;
        max-height: 165px !important;
        height: 165px !important;

        align-self: end !important;
        overflow: hidden !important;
    }
}