/*Date Picker Style*/

.ui-datepicker {
    background-color: #f4f6f9; /* AdminLTE's default card background color */
    border: 1px solid #d2d6de;
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
}

.ui-datepicker-header {
    background-color: #3c8dbc; /* AdminLTE's primary color */
    color: #fff;
}

.ui-state-default {
    background-color: #f4f4f4;
    border-color: #ddd;
}

.ui-state-active {
    background-color: #3c8dbc;
    color: #fff;
}

.is-invalid {
    border-color: red; /* or any color of your choice */
    background-color: #f8d7da; /* Optional background color */
}

/*For Schedule Details*/
.row-deleted {
    background-color: #f8d7da; /* Light red background */
    text-decoration: line-through; /* Strikethrough text */
}

/* Styles for tablePaymentObligations */
.tablePaymentObligations tbody td {
    vertical-align: middle;
}

.tablePaymentObligations .active {
    background: gold !important;
}

/* Hide info and pagination only for tablePaymentObligations */
.tablePaymentObligations_info,
.tablePaymentObligations_paginate {
    display: none;
}

/* Style the filter input for tablePaymentObligations */
.tablePaymentObligations_wrapper div.dataTables_filter input {
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    color: firebrick;
    height: auto;
}

/* Style the filter label for tablePaymentObligations */
.tablePaymentObligations_wrapper div.dataTables_filter label {
    font-weight: bold;
    color: red;
}

/* Responsive styles for tablePaymentObligations */
@media only screen and (max-width: 130px) {
    .tablePaymentObligations {
        width: 100% !important;
        border-collapse: separate;
    }

        .tablePaymentObligations td, .tablePaymentObligations th {
            display: table-cell;
            width: 100%;
            text-align: left;
            border: none;
        }

        .tablePaymentObligations td {
            padding: 10px 0;
            border-bottom: 1px solid #ddd;
        }

        .tablePaymentObligations .btn {
            width: 100%;
            text-align: center;
            margin-top: 10px;
        }

    .tablePaymentObligations_wrapper .dataTables_filter {
        float: none;
        text-align: center;
    }
}


.paymentDischargeInfo p {
    font-weight: bold;
}

.dischargeInfoTotalLoaded {
    color: red;
}

.dischargeInfoTotalSelected {
    color: green;
}

@media (max-width: 992px) {
    td.details-control {
        display: none;
    }
}

@media print {
    /* Hide any non-printable elements */
    .dichargeDetailsModalPrintHeader, .dichargeDetailsModalPrintFooter, .btn {
        display: none;
    }

    .dataTables_filter, .dataTables_paginate, .dataTables_length {
        display: none;
    }
    /* You can define more styles specifically for printing here */
}



/*Attendance*/
.text-center_checks {
    display: flex;
    justify-content: center;
    align-items: center; /* Optional: vertically center if height is defined */
    height: 100%; /* Optional: ensures full height for vertical centering */
}

    .text-center_checks input[type="checkbox"] {
        width: 20px; /* Resize checkbox width */
        height: 20px; /* Resize checkbox height */
        border: 2px solid blue; /* Blue border */
        appearance: none; /* Remove default styling */
        cursor: pointer; /* Change cursor to pointer */
        margin-top: 30px !important;
    }

        .text-center_checks input[type="checkbox"]:checked {

            border-color: blue; /* Keep border blue when checked */
        }

            /* Optional: Style the checked state with a pseudo-element */
            .text-center_checks input[type="checkbox"]:checked::before {
                content: "✔"; /* Optional checkmark symbol */
                color: white; /* Color of the checkmark */
                position: absolute; /* Position it over the checkbox */
                left: -5px; /* Adjust positioning */
                top: -18px; /* Adjust positioning */
                font-size: 26px; /* Font size of checkmark */
            }


/*Ovoj dele e za Dropdown za Klient za Plakanjata*/

@media (max-width: 576px) {
    #clientSelect {
        width: 100% !important; /* Full width on small screens */
    }

    /* Ensure the search button stacks below the dropdown */
    .flex-sm-row {
        flex-direction: column !important;
    }

    .text-end {
        text-align: left !important; /* Ensure the button aligns left on small screens */
        margin-top: 10px; /* Add some space between dropdown and button */
    }

    #searchButton {
        width: 100% !important;
    }
}

@media (min-width: 576px) {
    /* Ensure the select2 dropdown takes 77% width on larger screens */
    #clientSelect {
        width: 77% !important;
    }

    /* The button will be inline next to the dropdown */
    .text-end {
        margin-left: 10px; /* Add some space between dropdown and button */
    }
}