body {
    background-color: #f4f6f9;
}
.btnPdf {
    background: linear-gradient(45deg, #ff416c, #ff4b2b); /* Gradient background */
    border: none;
    color: white;
    padding: 5px 15px;
    cursor: pointer;
    letter-spacing: 1px;
    border-radius: 10px; /* Softer but unique roundness */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Elegant shadow for depth */
    transition: all 0.4s ease; /* Smooth transitions */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
}

    .btnPdf i {
        margin-right: 10px; /* Space between icon and text */
    }

    .btnPdf:hover {
        background: linear-gradient(45deg, #ff758c, #ff6a4b); /* Hover color */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Stronger shadow */
        transform: translateY(-3px); /* Lift effect */
    }

    .btnPdf:active {
        transform: translateY(1px); /* Subtle press effect */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Dim shadow */
    }

.btnExcel {
    background: linear-gradient(45deg, #163f18, #4c9927); /* Gradient background */
    border: none;
    color: white;
    padding: 5px 15px;
    cursor: pointer;
    font-family: 'Arial', sans-serif;
    border-radius: 10px; /* Softer but unique roundness */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    transition: all 0.3s ease; /* Smooth hover effect */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .btnExcel i {
        margin-right: 10px; /* Space between icon and text */
    }

    .btnExcel:hover {
        background: linear-gradient(45deg, #49b065, 449342); /* Hover color */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Stronger shadow */
        transform: translateY(-3px); /* Lift effect */
    }

    .btnExcel:active {
        transform: translateY(1px); /* Subtle press effect */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Dim shadow */
    }

.btnSearch {
    background: linear-gradient(90deg, #1A6CB1, #00539C); /* Luxurious blue gradient */
    border: none;
    color: white;
    padding: 5px 15px;
    cursor: pointer;
    letter-spacing: 1px;
    border-radius: 10px; /* Softer but unique roundness */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Elegant shadow for depth */
    transition: all 0.4s ease; /* Smooth transitions */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
}

    .btnSearch i {
        margin-right: 10px; /* Space between icon and text */
    }

    .btnSearch::before {
        /*content: '';*/
        position: absolute;
        top: 0;
        left: -100%;
        width: 200%;
        height: 100%;
        background: rgba(255, 255, 255, 0.2);
        transform: skewX(-30deg);
        transition: all 0.4s ease;
    }

    .btnSearch:hover::before {
        left: 100%;
    }

    .btnSearch:hover {
        background: linear-gradient(90deg, #00539C, #003F7F); /* Subtle darkening */
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
        transform: translateY(-3px); /* Lift on hover */
    }

    .btnSearch:active {
        transform: translateY(1px); /* Press effect */
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); /* Dimmed shadow */
    }

header {
    background-color: #1A6CB1 !important;
}

footer {
    background-color: #1A6CB1 !important;
    color: white !important;
}

/*table {
    caption-side: bottom;
    border-collapse: collapse;
    width: 153% !important;
}*/
.e-reportviewer-viewer {
    min-height: 100px !important;
}

/* Ensure charts resize dynamically */
/*#top4unachieved, #barErrorRating, #evalsByScores {*/
/*#top4unachieved, #barErrorRating {
    width: 100% !important;
}*/

/* Responsive table in Top3Changed */
#Top3Changed table, #LowestScoreCriteria table {
    width: 100% !important;
}

/* Adjust card padding for small screens */
@media (max-width: 576px) {
    .card {
        padding: 5% !important;
    }
}

/* Align Top3Changed content on small screens */
@media (max-width: 768px) {
    #Top3Changed, #LowestScoreCriteria {
        text-align: center;
    }
}

#eval_statusRow {
    background-color: #c0c0c0;
    font-size: 24px;
    margin: 4px 0 4px 0;
    border-radius: 6px;

}

/* Add a professional background color to the card */
.card {
    background-color: #f8f9fa; /* Light background for a clean look */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for a floating effect */
}

/* Optional: Add a dark header background and white text for contrast */
.card-header.text-bg-dark {
    background-color: #343a40; /* Dark header */
    color: #fff; /* White text */
    font-weight: bold; /* Optional: Make the text bold */
}

/* Align the button to the top right corner */
.card-header .btn {
    margin-left: auto; /* Align button to the right */
}

/* Optional: Additional style to improve card shadow */
.card-body {
    padding: 20px; /* Add some padding for spacing */
    /* background-color: #ffffff; */ /* White background for body */
    /* box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05); */ /* Subtle inset shadow */
}
.k-button-solid-base {
    background-color: transparent;
}

.k-button {
    border-style: none;
}

.custom-modal {
    display: none; /* hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.custom-modal-content {
    background-color: white;
    margin: 15% auto;
    padding: 20px;
    border-radius: 8px;
    width: 300px;
    text-align: center;
}


/* ------------------------------
   Root fix: ensure input popups (Kendo, jQuery UI, Select2) stack above nav/menu
   without eclipsing Bootstrap modals. Keep below modal (1050).
   ------------------------------ */
/*.k-animation-container,
.k-animation-container .k-popup,
.k-popup,
.k-list-container {
    z-index: 5 !important;
}

.ui-autocomplete {
    z-index: 5 !important;
}

.select2-container {
    z-index: 5 !important;
}*/


/* ========================================
   Global Safari/iOS Compatibility Fixes
   Applied to all pages automatically
   ======================================== */

/* Isolate file upload controls to prevent click interference */
.file-upload-container {
    isolation: isolate;
    position: relative;
    z-index: 1;
}

.k-upload {
    pointer-events: auto;
}

/* Ensure all buttons have proper z-index and pointer events */
.btnSearch, .btnPdf, .btnClear, .btnFail, .btnExcel {
    position: relative;
    z-index: 10;
    pointer-events: auto;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    touch-action: manipulation;
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    /* Target iOS Safari specifically */
    .btnSearch, .btnPdf, .btnClear, .btnFail, .btnExcel {
        cursor: pointer;
        -webkit-appearance: button;
        -webkit-user-select: none;
        user-select: none;
    }
    
    /* Prevent accidental file input triggers */
    input[type="file"] {
        pointer-events: auto;
        touch-action: manipulation;
    }
    
    /* Ensure proper button rendering on iOS */
    input[type="button"] {
        -webkit-appearance: button;
        appearance: button;
    }
}

/* Safari-specific fixes (Mac and iOS) */
@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        .btnSearch, .btnPdf, .btnClear, .btnFail, .btnExcel {
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        
        /* Prevent file upload from expanding click area */
        .k-upload-button {
            pointer-events: auto;
        }
    }
}

/* Prevent click event leakage between controls */
.section .row {
    isolation: isolate;
}

/* Ensure proper spacing to prevent accidental clicks */
.btnSearch, .btnPdf, .btnClear, .btnFail, .btnExcel {
    margin: 0 4px;
    min-width: 80px;
}

/* Fix for Kendo Upload widget on Safari/iOS */
.k-upload {
    display: inline-block;
    isolation: isolate;
}

.k-upload .k-upload-button {
    pointer-events: auto;
    touch-action: manipulation;
}

/* Prevent double-tap zoom on buttons (iOS) */
button, input[type="button"], input[type="submit"] {
    touch-action: manipulation;
}

/* Fix Kendo Grid header alignment issue - remove unwanted padding-right */
.k-grid-header {
    padding-right: 0 !important;
}