/* =============================================================
   Global mobile responsive overrides (CW_USETABLET_FOR_ESIGPAD)
   Phone viewports — max-width: 767px
   ============================================================= */
@media (max-width: 767px) {

    /* ---- Container ----------------------------------------- */
    .container {
        padding-left: 12px !important;
        padding-right: 0px !important;
        width: 100%;
    }
    
    .row {
        width: 100%;
        margin:0;
    }

    .right-side-menu {
        position: absolute;
        right: 50px;
        bottom: 3px;
    }
    .right-side-menu-last {
        position: absolute;
        right: 15px;
        bottom: 6px;
    }

    /* ---- Header -------------------------------------------- */
    header {
        min-width: 100%;
        overflow: hidden;
    }

    header #header-app-name > svg,
    header #header-app-name > svg image {
        width: 150px !important;
        height: 30px !important;
    }

    /* Hide the "Digital Showroom" sub-label; dealer name is enough on a phone */
    header #header-app-name > span:not(#dealerName) {
        display: none !important;
    }

    header #header-app-name #dealerName {
        position: static !important;
        font-size: 13px !important;
        text-align: center;
        max-width: 60%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    header #header-app-name {
        min-height: 56px;
        flex-wrap: wrap;
        gap: 4px;
        padding: 6px 12px;
    }

    #navbar {
        padding: 4px 8px 6px;
    }

    #navbar > ul.nav.nav-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 0;
        margin: 0;
    }

    /* Undo inline absolute/float on the icon images */
    .uni-list a img {
        position: static !important;
        margin: 0 6px !important;
        vertical-align: middle;
    }

    .support-list a img {
        float: none !important;
        margin: 0 6px !important;
        vertical-align: middle;
    }


    /* ---- Forms --------------------------------------------- */
    /* layout.css hard-codes a 120px floated label and 140px margin on .controls.
       Undo both so the label stacks above the input on phones. */
    .form-horizontal .control-label {
        float: none !important;
        width: 100% !important;
        text-align: left !important;
        padding-top: 0 !important;
        margin-bottom: 4px;
    }

    .form-horizontal .controls {
        margin-left: 0 !important;
    }

    .form-horizontal .form-control {
        width: 100%;
        box-sizing: border-box;
    }


    /* ---- Tables -------------------------------------------- */
    .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }


    /* ---- Buttons / actions --------------------------------- */
    .btn {
        min-height: 44px;
        font-size: 15px;
        padding: 9px 12px;
    }

    /* pull-right submit buttons become full-width */
    .col-md-4.pull-right {
        float: none !important;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-top: 8px;
    }

    /* Keep 3-button rows (e.g. Edit / Clear / Continue) side-by-side */
    .row > .col-md-4 {
        width: 33.33%;
        float: left;
        box-sizing: border-box;
        padding-left: 5px;
        padding-right: 5px;
    }

    .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-2, .col-xs-1,
    .col-md-3, .col-md-4, .col-md-5, .col-md-2, .col-md-1,
    .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-2, .col-sm-1 {
        width: 50%;
    }

    .home-container .panel-heading {
        height: 200px;
    }

     .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, 
     .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, 
     .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { 
        width: 100%;
    }


    /* ---- Signature canvas ---------------------------------- */
    #signature {
        width: 100% !important;
        box-sizing: border-box;
        touch-action: none;
    }


    /* ---- Typography ---------------------------------------- */
    p.lead {
        font-size: 14px;
        line-height: 1.5;
    }

    #timeOut {
        font-size: 12px;
        text-align: center;
        display: block;
    }

    .panel-heading img {
        width: 70px;
    }

}