/*============================
  Responsive CSS for ViewMaster
==============================*/
@media (min-width: 1800px) {
    .custom-container {
        padding: 0 5rem; /* give extra breathing room on ultra-wide screens */

    }
}

/* -------------------------------
   Large Screens: 1600px+
--------------------------------- */
@media (min-width: 1600px) {
    .custom-container {
        width: 90%; /* container takes 90% of viewport */
        max-width: 1600px; /* but never exceeds 1600px */
        margin: 0 auto; /* center it */
        padding: 0 1rem; /* optional inner spacing */
    }
}

/* -------------------------------
   Desktop / Large: 1280px - 1599px
--------------------------------- */
@media (max-width: 1599px) {
    .custom-container {
        width: 95%;
        margin: 0 auto;
    }

  
    .custm-lg-form {
        width: 80%;
    }

    .top-header .nav-item > .nav-link {
        padding: 0.5rem;
    }

    .nav-menu a,
    .nav-menu a:focus {
        margin-bottom: 0.5rem;
    }

    h1 {
        font-size: 1.5rem;
    }

    #header {
        position: relative;
        padding: 0.5rem;
    }

    .custom-container-zone-setup {
        width: 90%;
    }

    .zone-lable {
        font-size: 0.9rem;
        margin: 0;
    }

    .control-zone-button {
        font-size: 0.8rem;
        margin: 0;
    }
}

/* -------------------------------
   Laptops / Medium: 1024px - 1280px
--------------------------------- */
@media (max-width: 1280px) {
    .top-header .nav-item > .nav-link {
        margin-left: 0.2rem;
        padding: 0.5rem;
    }

    .cst-canvas-btn {
        min-width: 50px;
        padding: 0;
    }

    .dropend .dropdown-toggle {
        margin-left: 0.7rem;
    }

    #header {
        top: 40px;
    }

    .modal {
        --bs-modal-width: 600px;
    }

    .cst-area {
        margin-top: 0.5rem;
    }
}

/* -------------------------------
   Tablets: 768px - 1024px
--------------------------------- */
@media (max-width: 1024px) {
    .cstm-canvas .nav-item {
        margin: 0.5rem 0;
    }

    .dropdown-menu {
        border: none;
        background: transparent;
        box-shadow: none;
    }

    .main-page-content {
        width: 60%;
        max-width: 700px;
        margin: 0 auto;
    }

    li.nav-item.dropdown {
        margin: 0.5rem 0;
    }

    .dropdown:hover > .dropdown-menu,
    .dropend:hover > .dropdown-menu {
        margin-left: 2.5rem;
        position: initial;
    }

    .nav-menu a span,
    .nav-menu a:focus span {
        display: none;
    }

    .nav-menu a,
    .nav-menu a:focus {
        width: 56px;
    }

    .img-container {
        display: none;
    }

    .top-header-btn .btn {
        min-width: 60px;
    }
}

/* -------------------------------
   Mobile: 450px - 768px
--------------------------------- */
@media (max-width: 768px) {

    table.responsive-table,
    table.responsive-table thead,
    table.responsive-table tbody,
    table.responsive-table th,
    table.responsive-table td,
    table.responsive-table tr {
        display: block;
    }

        table.responsive-table thead tr {
            display: none; /* hide headers on small screens */
        }

        table.responsive-table td {
            position: relative;
            padding-left: 50%;
            text-align: left;
            border: none;
            border-bottom: 1px solid #ccc;
       
        }

            table.responsive-table td::before {
                position: absolute;
                left: 0;
                width: 45%;
                margin-top: 0.5rem;
                font-weight: bold;
                white-space: nowrap;
                content: attr(data-label); /* will display header label */
            }

    .top-header .container-fluid {
        flex-wrap: wrap;
    }

    .top-header-btn .btn {
        padding-right: 2rem;
    }

        .top-header-btn .btn.dropdown-toggle::after {
            right: 0.5rem;
        }

    #header {
        top: 20px;
    }

    .nav-menu a:hover span,
    .nav-menu .active span,
    .nav-menu .active:focus span,
    .nav-menu li:hover > a span {
        display: none;
    }

    .picture {
        height: calc(100vh - 450px);
    }

    .edit-zone-card,
    .zone-scan-card,
    .pdf-viewr-card,
    .master-set-card,
    .help-card {
        overflow: auto;
        height: calc(100vh - 157px);
    }

    .pdf-view object {
        height: 250px;
    }

    .nav-tabs .nav-link {
        font-size: 0.8rem;
        padding: 0.5rem;
    }

    .control-zone-button {
        margin: 0;
    }

    .zone-lable {
        margin: 0;
    }

    .card-title-lg {
        font-size: 1rem;
    }

    

  
}

@media (max-width: 576px) {
    /* Center all labels and inputs within your card */
    .card .row {
        text-align: center; /* center label text */
        justify-content: center; /* center input columns */
    }

    .card label,
    .card input {
        display: block;
        margin: 0 auto; /* center horizontally */
       
    }

    .card label {
        text-align: center;
    }

    .mt-xs-2{
        margin-top: 0.5rem;
    }
    .group-sm-width {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    table.responsive-table td {
        border: none;
    }

        table.responsive-table td:last-child {
            margin-bottom: 1rem;
            border-bottom: 2px solid #ccc;
            padding-bottom: 2rem;
        }
    table.responsive-table td:first-child {
        margin-top: 2rem;
    }
}

@media (max-width: 500){
    .card-custom .card-button-section {
        display: contents;
    }
}
/* -------------------------------
   Extra Small Mobile: <450px
--------------------------------- */
@media (max-width: 450px) {
    .responsive-div {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    #selectedMaster_Span {
        margin-top: 10px;
    }

    .custom-container-zone-setup {
        width: 95%;
    }

    .area-with-mobile {
        margin-left: 0,1rem;
        margin-right: 0.1rem;
    }
}

    @media (min-width: 250px) and (max-width: 450px) {
        .responsive-div {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .card-custom .card-button-section {
            display: contents;
        }


        .custom-container-zone-setup {
            width: 95%;
        }

        .group-sm-width {
            width: 100%;
            margin-bottom: 0.5rem;
        }

        .cutom-profile-menu {
            position: fixed !important;
            right: 0.9rem !important;
            left: auto !important;
            top: auto !important;
            bottom: auto !important;
        }
    }

    /* -------------------------------
   Portrait orientation for tablets
--------------------------------- */
    @media screen and (min-device-width: 768px) and (max-device-width: 1200px) and (orientation: portrait) {
        .image-custom {
            width: 100%;
        }

        .custm-lg-form {
            width: 80%;
        }
    }


@media (max-width: 1024px) {
   
    .pdf-toolbar {
        flex-wrap: wrap;
        gap: 10px;
    }

    .pdf-toolbar-left {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        min-width: 0;
    }

    .pdf-toolbar-right {
        display: flex;
        gap: 10px;
        align-items: center;
    }
}

    @media (max-width: 768px) {

        /* Make the toolbar rows wrap on mobile */
        .pdf-toolbar-left,
        .pdf-toolbar-right {
            display: flex;
            flex-wrap: wrap;
            gap: 1px;
            width: 100%;
        }

        /* Full width dropdowns */
        #SearchForPdf,
        #SearchForMaster {
            width: 100% !important;
        }

        /* Buttons become wrap-friendly */
        #btnToggleLivePopup,
        #btnToggleShowAllValues,
        #btnExportPdf,
        #btnFitWidth,
        #btnZoomOut,
        #btnZoomIn,
        #btnToggleUpdateMode {
            flex: 1 1 140px; /* grow, shrink, base width */
            min-width: 140px; /* keep them tappable */
        }
    }

    @media (max-width: 450px) {
        #btnFitWidth, #btnToggleUpdateMode {
            display: none;
            
        }

        .pdf-toolbar-right {
            justify-content: center;
        }
    }


    /* Step 2A: Live popup becomes a bottom sheet on mobile */
    @media (max-width: 768px) {
        .pdf-live-popup {
            left: 12px !important;
            right: 12px !important;
            top: auto !important;
            bottom: 12px !important;
            width: auto !important;
            max-width: none !important;
            height: 42vh !important;
            max-height: 65vh !important;
            resize: none !important; /* resizing is painful on touch */
        }

        /* Make inside scroll nicely */
        .pdf-live-body {
            max-height: calc(42vh - 52px); /* header height approximation */
            overflow: auto;
            -webkit-overflow-scrolling: touch;
        }
    }

@media (max-width: 768px) {
    .pdf-live-tooltip {
        font-size: 13px;
        min-width: 200px;
        max-width: calc(100vw - 24px);
    }

    .pdf-export-toast {
        top:200px; /* distance from top */
        right: 20px; /* distance from right */
    }
}


/* ==========================================
   ViewMaster mobile cleanup 
   Keep date + close in top bar
   Make master selector narrower
========================================== */

.vm-group-input {
    min-width: 140px;
    max-width: 150px;
}

.vm-mobile-group-nav {
    display: none;
}
@media (max-width: 768px) {

    #dualSlider,
    .slider-wrapper,
    .time-range-custom,
    #btnPrevMinute,
    #btnNextMinute,
    #timeDisplay,
    .cst-area,
    #btnAdvancedSettings,
    a[href="/ViewMaster/Index"] {
        display: none !important;
    }

    td[data-label="Ch#"],
    td[data-label="Zone"],
    td[data-label="Zone ID"] {
        display: none !important;
    }

    .vm-title {
        display: none;
    }

    #rtcTimeLabel {
        margin: 0 !important;
        font-size: 1rem;
        line-height: 1.2;
        flex: 1 1 auto;
        text-align: left;
    }


    .vm-selected-master {
        display: none;
    }

    .vm-master-nav {
        margin-top: 0.75rem !important;
        gap: 0.4rem !important;
        flex-wrap: nowrap;
        width:100%;
    }

    .vm-master-arrow {
        width: 36px;
        min-width: 36px !important;
        height: 36px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .vm-master-select {
        max-width: 210px;
        flex: 0 1 210px;
        padding: 0.25rem;
      
    }

    .vm-zone-title {
        display: block;
        margin: 1rem 0 0.5rem 0;
        padding: 0.55rem 0.75rem;
        background: #f2f3f5;
        border-radius: 8px;
        font-size: 0.95rem;
        font-weight: 600;
        color: #35288f;
        text-align: center;
        box-shadow: rgba(77, 76, 76, 0.12) 0px 2px 4px;
    }

    table.responsive-table td.vm-zone-title {
        padding-left: 0 !important;
        text-align: center !important;
        width: 100%;
    }

        table.responsive-table td.vm-zone-title::before {
            content: none !important;
            display: none !important;
        }

    td[data-label="Lock"] {
        display: inline-flex !important;
        width: 48% !important;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        padding-left: 0 !important;
    }

    td[data-label="Set"] {
        display: inline-flex !important;
        width: 50% !important;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        padding-left: 0 !important;
    }


        td[data-label="Set"]::before {
            padding-left: 0 !important;
            margin-top: 0.2rem !important;
        }

    .vm-mobile-group-nav {
        display: block;
    }

    .vm-close-btn {
        min-width: 32px;
    }
}

@media (max-width: 450px) {
    .vm-master-select {
        min-width: 235px;
        max-width: 235px;
        flex-basis: 170px;
    }
    td[data-label="Lock"]::before {
        display: none !important;
    }

    td[data-label="Lock"] {
        display: inline-flex !important;
        width: 42% !important;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        padding-left: 0 !important;
    }

    td[data-label="Set"] {
        display: inline-flex !important;
        width: 56% !important;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        padding-left: 0 !important;
    }


    .table.responsive-table td {
        padding-left: 43%;
    }

    .vm-master-select {
        min-width: 200px;
        max-width: 200px;
        flex-basis: 170px;
    }

    td[data-label="Lock"]::before {
        display: none !important;
    }
    
}
@media (max-width: 361px) {





        td[data-label="Lock"] {
        display: inline-flex !important;
        width: 28% !important;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        padding-left: 0 !important;
    }

    td[data-label="Set"] {
        display: inline-flex !important;
        width: 67% !important;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        padding-left: 0 !important;
    }
      

        .table.responsive-table td {
            padding-left: 30%;
            padding-right: 0;
        }

       .vm-master-nav{
         gap: 0.2rem !important;
        }
        .vm-master-arrow {
            width: 15px;
            min-width: 32px !important;
            height: 20px;
        }
        .vm-master-select {
            max-width: 150px;
            flex: 0 1 150px;
        }
        .vm-group-input {
        max-width: 100px;
        }
    .vm-master-nav {
        margin-left:0.5rem;
    }
}