/* =============================== */
/* 🌟 Modern Table Styling for cases.html */
/* =============================== */

body {
    background-color: #f4f4f4; /* Light gray background for contrast */
}

/* ===== TABLE CONTAINER ===== */
.cases-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}

/* ===== TABLE HEADER ===== */
.cases-table thead th {
    background-color: #333;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    padding: 10px;
    border-bottom: 3px solid #555555;
}

/* ===== REMOVE RED VERTICAL LINES IN HIGHLIGHTED ROWS ===== */
.cases-table tbody tr.highlight-row td {
    border-color: transparent !important;
}

/* ===== ALTERNATING ROW COLORS (Better Contrast) ===== */
.cases-table tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.cases-table tbody tr:nth-child(even) {
    background-color: #c2c2c2;
}

/* ---------- RED HIGHLIGHT ---------- */
.cases-table tbody tr.highlight-row {
    background-color: #ffebeb !important; /* Light Red */
    color: #d9534f !important;
    font-weight: bold !important;
}

/* Ensure Red Applies to All Table Cells */
.cases-table tbody tr.highlight-row td {
    color: #d9534f !important;
}

/* Fix Red Color Inside Select & Input Fields */
.cases-table tbody tr.highlight-row select,
.cases-table tbody tr.highlight-row input {
    color: #d9534f !important;
    font-size: 14px;
    border: 2px solid red !important;
}

/* Make Dropdown Options Red When Selected */
.cases-table tbody tr.highlight-row select option {
    color: #d9534f !important;
    font-size: 14px;
    font-weight: bold !important;
}

/* Ensure Date Input Text Turns Red */
.cases-table tbody tr.highlight-row input[type="date"] {
    color: #d9534f !important;
    font-weight: bold !important;
    border: 2px solid red !important;
}

/* ---------- ORANGE HIGHLIGHT ---------- */

.cases-table tbody tr.highlight-row-orange {
    background-color: #fff4e6 !important; /* Light Orange */
    color: #f0ad4e !important;             /* Orange text color */
    font-weight: bold !important;
}

/* Ensure Orange Applies to All Table Cells in the Row */
.cases-table tbody tr.highlight-row-orange td {
    color: #f0ad4e !important;
}

/* Fix Orange Color Inside Select & Input Fields */
.cases-table tbody tr.highlight-row-orange select,
.cases-table tbody tr.highlight-row-orange input {
    color: #f0ad4e !important;
    font-size: 14px;
    border: 2px solid orange !important;
}

/* Make Dropdown Options Orange When Selected */
.cases-table tbody tr.highlight-row-orange select option {
    color: #f0ad4e !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

/* Ensure Date Input Text Turns Orange */
.cases-table tbody tr.highlight-row-orange input[type="date"] {
    color: #f0ad4e !important;
    font-weight: bold !important;
    border: 2px solid orange !important;
}

/* Optional: Specific styling for the "Opened" cell if desired */
.cases-table tbody tr.highlight-row-orange td.highlight-cell-orange {
    background-color: #ffe4b3 !important; /* A slightly different orange for the cell */
}


.cases-table tbody tr td select {
    font-size: 14px; /* Adjust font size as needed */
    padding: 5px; /* Adjust padding for better readability */
}

/* Ensure dropdown options have the same font size */
.cases-table tbody tr td select option {
    font-size: 14px !important; /* Ensures consistency */
}

.cases-table tbody tr td input[type="date"] {
    font-size: 14px; /* Adjust font size */
    padding: 5px; /* Improve spacing inside the field */
}


/* ===== BUTTON STYLING ===== */
.btn-primary {
    background-color: #0275d8;
    border-color: #025aa5;
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
}

.btn-primary:hover {
    background-color: #025aa5;
}

/* ===== PAGINATION BUTTONS (Modern Look) ===== */
.dataTables_wrapper .dataTables_paginate {
    margin-top: 10px; /* Add spacing above pagination */
    text-align: center; /* Center pagination */
}

/* Default pagination buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-block;
    padding: 6px 12px;
    margin: 3px;
    border-radius: 6px;
    background-color: transparent !important; /* Remove background */
    color: black !important; /* Ensure visible text */
    font-weight: bold;
    border: none !important; /* Remove border */
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease-in-out;
}

/* Pagination button hover effect */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #e3e3e3 !important; /* Light Gray */
}

/* Active Page Button (Current Page) */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: transparent !important; /* No background */
    border: none !important;
    box-shadow: none !important;
    color: black !important;
    font-weight: bold;
    pointer-events: none; /* Prevent clicking */
}

/* Search Box Improvements */
.dataTables_filter input {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 6px 12px;
    font-size: 14px;
    transition: all 0.3s ease-in-out;
    width: 250px; /* Make it wider */
}

.dataTables_filter input:focus {
    border-color: #007bff;
    box-shadow: 0px 0px 5px rgba(0, 123, 255, 0.5);
}

/* ===== ADD BORDER RADIUS TO TABLE TOP HEADERS ===== */
.cases-table thead tr:first-child th:first-child {
    border-top-left-radius: 10px;
}

.cases-table thead tr:first-child th:last-child {
    border-top-right-radius: 10px;
}

/* Add margin below the search bar */
.dataTables_filter {
    margin-bottom: 15px; /* Adjust space as needed */
}

#toggleHandledFilter.active {
    background-color: #d9534f !important; /* Red for active */
    color: white !important;
    font-weight: bold;
}

/* ===== INDIVIDUAL CELL HIGHLIGHTING (For overdue inputs) ===== */
.highlight-cell {
    background-color: rgba(255, 0, 0, 0.2) !important;  /* Light Red */
    border: 2px solid red !important;
    font-weight: bold !important;
    color: red !important;
}

#pendingEscalationsTable tbody tr.case-row:hover {
    background-color: #d3d3d3; /* Light gray background */
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

.form-text-required {
    margin-left: 1rem; /* or however much spacing you want */
}

.tooltip-red {
    color: red;
    font-weight: bold;
  }

.tooltip-orange {
    color: orange;
    font-weight: bold;
}