﻿/* Select2 Styling Fixes */
.select2-search__field {
    width: 100% !important;
    min-width: 200px !important;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    width: auto !important;
    min-width: 150px !important;
}

.select2-container {
    width: 100% !important;
}

.h3 {
    color: #000;
}

/* Mobile Responsive Popup Window Styles */
@media (max-width: 767.98px) {
    .popupwindow {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        height: calc(100vh - 40px) !important;
        max-height: calc(100vh - 40px) !important;
        left: 10px !important;
        top: 20px !important;
        position: fixed !important;
    }

    .popupwindow_container {
        z-index: 10900 !important;
        padding: 0 !important;
    }

    .popupwindow_content {
        padding: 10px !important;
        overflow-y: auto !important;
        max-height: calc(100vh - 120px) !important;
    }

    .popupwindow_titlebar {
        padding: 8px !important;
        min-height: 40px;
        flex-shrink: 0;
    }

    .popupwindow_titlebar_text {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
    }

    .popupwindow_titlebar_button {
        width: 32px !important;
        height: 32px !important;
        margin-left: 4px !important;
        touch-action: manipulation;
    }

    .popupwindow_statusbar {
        min-height: 30px;
        flex-shrink: 0;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .popupwindow {
        width: calc(100vw - 40px) !important;
        max-width: 700px !important;
        height: fit-content !important;
        max-height: calc(100vh - 60px) !important;
        left: 20px !important;
        top: 30px !important;
    }

    .popupwindow_content {
        max-height: calc(100vh - 140px) !important;
        overflow-y: auto !important;
    }
}

@media (min-width: 992px) {
    .popupwindow {
        height: fit-content !important;
        max-height: 700px !important;
    }
}

.popupwindow_container {
    z-index: 10900 !important;
}

.popupwindow_titlebar {
    padding: 7px;
}

    .popupwindow_titlebar .additional-doc-buttons-container {
        width: 100%;
        text-align: center;
        position: absolute;
        left: 0;
    }

        .popupwindow_titlebar .additional-doc-buttons-container .listing-action-button {
            line-height: 4px !important;
            padding: 5px !important;
            display: inline-table;
        }

            .popupwindow_titlebar .additional-doc-buttons-container .listing-action-button i {
                padding-left: 0px;
            }

.popupwindow_titlebar_text {
    /*font-size: 18px;*/
}

.popupwindow_container .sv-form-group-rows .row:last-child .form-fields-container {
    margin-bottom: 0px !important
}

.popupwindow_titlebar_button_close {
    background: #ca0606;
    stroke: #fff;
    border-radius: 3px;
}

.popupwindow_titlebar_button_maximize {
    background: #40babd;
    stroke: #fff;
    border-radius: 3px;
}

.popupwindow_titlebar_button_collapse {
    background: #497cb1;
    stroke: #fff;
    border-radius: 3px;
}

.popupwindow_titlebar_button_minimize {
    background: #6dbd63;
    stroke: #fff;
    border-radius: 3px;
}

.popupwindow_container .modal-body, .popupwindow_container .modal-footer {
    padding: 7px
}

.popupwindow_container .modal-body {
    /*max-height: 200px;*/
    overflow: auto;
}

.popupwindow_container label {
    margin-bottom: 0px;
    font-weight: 500;
    color: #000;
    font-size: 1rem;
}

.popupwindow_container .form-group {
    margin-bottom: 0.8rem
}

.popupwindow_container textarea.form-control {
    /*height: auto !important;*/
    min-height: 58px !important;
    resize: vertical !important;
}

.popupwindow_container .form-control {
    height: 24px;
    height: auto;
    padding: 0.4rem;
    font-size: 12px;
    color: #000;
}

.modal-body .form-group .form-control {
    height: 38px !important;
    padding: 0.4rem;
    font-size: 1rem;
    color: #000;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid #ced4da !important;
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid #ced4da !important;
}

.popupwindow_container .validation-summary-valid ul {
    margin-bottom: 0.5rem
}

.popupwindow_container button.btn, .popupwindow_container input.btn {
    max-width: 184px;
    text-align: center;
    margin-left: 5px;
    float: right;
    padding: 0.4rem 0.75rem;
    font-size: 1rem;
}

#modal-window-container {
    min-height: 200px;
}

.picker {
    z-index: 100100 !important;
}

.select2-container {
    z-index: 100000 !important;
}

/* Mobile Form Improvements in Popup */
@media (max-width: 767.98px) {
    .popupwindow .modal-content {
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        height: 100% !important;
    }

    .popupwindow .modal-body {
        padding: 15px 10px !important;
        overflow-y: auto !important;
        max-height: none !important;
    }

    .popupwindow .modal-footer {
        padding: 10px !important;
        border-top: 1px solid #dee2e6 !important;
        background-color: #f8f9fa !important;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 10 !important;
        margin: 0 -10px -10px -10px !important;
    }

    .popupwindow .form-group {
        margin-bottom: 1rem !important;
    }

    .popupwindow .form-control {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 0.75rem !important;
        border-radius: 0.375rem !important;
    }

    .popupwindow .btn {
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
        border-radius: 0.375rem !important;
        min-height: 44px !important; /* Touch-friendly */
        touch-action: manipulation !important;
    }

    .popupwindow .row {
        margin-left: -5px !important;
        margin-right: -5px !important;
    }

    .popupwindow .col-md-6,
    .popupwindow .col-md-4,
    .popupwindow .col-md-3,
    .popupwindow .col-md-2,
    .popupwindow .col-md-12,
    .popupwindow .sv-from-group-col,
    .popupwindow [class*="col-"] {
        display: block !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        margin-bottom: 0.5rem !important;
        /* Force full width on mobile */
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        float: none !important;
    }

    /* Ensure narrow columns stack vertically on mobile */
    .popupwindow .col-md-2,
    .popupwindow .col-md-3,
    .popupwindow .col-sm-2,
    .popupwindow .col-sm-3,
    .popupwindow .sv-from-group-col {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        float: none !important;
        margin-bottom: 1rem !important;
    }

    .popupwindow label {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.5rem !important;
        color: #495057 !important;
    }

    /* Select2 Mobile Improvements */
    .popupwindow .select2-container--default .select2-selection--single {
        height: 48px !important;
        padding: 8px 12px !important;
        font-size: 16px !important;
        border-radius: 0.375rem !important;
    }

    .popupwindow .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 32px !important;
        padding-left: 0 !important;
    }

    .popupwindow .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 46px !important;
        right: 8px !important;
    }

    .popupwindow .select2-container--default .select2-selection--multiple {
        min-height: 48px !important;
        padding: 4px 8px !important;
        font-size: 16px !important;
        border-radius: 0.375rem !important;
    }

    /* Date picker improvements */
    .popupwindow .picker__input {
        font-size: 16px !important;
        padding: 0.75rem !important;
        height: 48px !important;
    }

    /* Form structure improvements */
    .popupwindow .sv-form-group-rows {
        width: 100% !important;
    }

    .popupwindow .sv-form-group-rows .row {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .popupwindow .sv-form-group-rows .row > [class*="col-"],
    .popupwindow .sv-form-group-rows .row > .sv-from-group-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin-bottom: 1rem !important;
    }

    /* Section headers */
    .popupwindow .sv-form-group-rows h4 {
        width: 100% !important;
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        color: #495057 !important;
        margin-top: 1.5rem !important;
        margin-bottom: 1rem !important;
        padding-bottom: 0.5rem !important;
        border-bottom: 2px solid #e9ecef !important;
        text-decoration: none !important;
    }

    .popupwindow .sv-form-group-rows h4:first-child {
        margin-top: 0 !important;
    }

    /* Remove br tags after headers */
    .popupwindow .sv-form-group-rows h4 + br {
        display: none !important;
    }
}

.dataTables_scrollBody table td a.listing-action-button {
    padding: .25rem .5rem;
    display: inline-block;
}

.edit-action {
    background-color: #4e73df !important;
    border-color: #4e73df !important;
    color: #fff !important;
    font-size: 12px !important;
    border-radius: .2rem !important;
}

.additional-custom-btn {
    background-color: #1ab7b7 !important;
    border-color: #1ab7b7 !important;
    color: #fff !important;
    font-size: 12px !important;
    border-radius: .2rem !important;
}

.duplicate-action {
    background-color: orange !important;
    border-color: orange !important;
    color: #fff !important;
    font-size: 12px !important;
    border-radius: .2rem !important;
}

.history-action {
    background-color: #a4b664 !important;
    border-color: #a4b664 !important;
    color: #fff !important;
    font-size: 12px !important;
    border-radius: .2rem !important;
}

.delete-action {
    background-color: #e74a3b !important;
    border-color: #e74a3b !important;
    color: #fff !important;
    font-size: 12px !important;
    border-radius: .2rem !important;
}

.btn-icon-split {
    color: #fff !important;
}

    .btn-icon-split .icon {
        padding: 3px 8px 5px 8px !important;
    }

        .btn-icon-split .icon i {
            font-size: 13px;
        }

    .btn-icon-split .text {
        padding: 5px 10px !important;
        line-height: 22px;
    }

.header-btn {
    padding: 4px 10px !important;
}

.btn-export {
    background-color: #1ab7b7 !important;
    border-color: #1ab7b7 !important;
}

.btn-filter {
    background-color: #899edb !important;
    border-color: #899edb !important;
}

.btn-create {
    min-width: 150px;
}

.label-success {
    border-radius: 0.3rem;
    background-color: #1cc88a;
    border-color: #1cc88a;
    text-align: center;
    color: #fff;
    max-width: 75px;
    line-height: 20px;
}

.label-warning {
    border-radius: 0.3rem;
    background-color: orange;
    border-color: orange;
    text-align: center;
    color: #fff;
    max-width: 75px;
    line-height: 20px;
}

.sidebar-dark .nav-item .nav-link {
    color: #fff !important;
}

    .sidebar-dark .nav-item .nav-link i {
        color: #fff !important;
    }

.nav-item:hover hr, .nav-item.active hr {
    background: #fff !important;
}

.sidebar .nav-item.active .nav-link {
    font-weight: unset !important;
}

.sidebar-toggled .sidebar-brand img {
    width: 140px !important;
}

.modal-footer .btn {
    padding: 4px 10px !important;
}

.table {
    color: #282828 !important;
}

.select2-container .select2-selection--single {
    height: 38px !important;
    border: 1px solid #d1d3e2 !important;
    border-radius: 0.35rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px !important;
    color: #000 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px !important;
}

input.input-validation-error, select.input-validation-error, textarea.input-validation-error {
    color: #E15348;
    border: 2px solid rgba(236,105,94,1);
}

/* Apply error styling to Select2 container when the underlying select has validation error */
select.input-validation-error + .select2-container .select2-selection {
    border: 2px solid rgba(236,105,94,1) !important;
}

.validation-summary-errors ul {
    margin-left: -25px;
}

    .validation-summary-errors ul li {
        color: #E15348;
    }

.sv-form-add-job .row.group10 .col-md-2 {
    flex: 0 0 20%;
    max-width: 20%;
}

.sv-form-edit-job .row.group10 .col-md-2 {
    flex: 0 0 20%;
    max-width: 20%;
}

#myTab.nav-pills .nav-item {
    padding-bottom: 3px;
}

#myTab.nav-pills .nav-link {
    padding: 15px !important;
    font-weight: 600;
    letter-spacing: 0.7px;
    font-size: 15px;
    background: #dfdfdf;
    color: #000;
    border-radius: 0;
}

    #myTab.nav-pills .nav-link.active {
        background: #899edb !important;
        outline: none;
    }

.tab-pane table td input.form-check-input {
    position: relative;
    margin-left: 0px;
    margin-top: 0px;
}
