.table > thead.custom-thead > tr > th { /* More specific selector */
    background-color: #6c757d;
    color: white;
}

/* Responsive styling for the logo on the homepage */
.home-logo {
  max-height: 80px; /* Default size for larger screens */
  width: auto;
  margin-bottom: 1rem;
}

/* On screens smaller than 768px (Bootstrap's 'md' breakpoint), make the logo smaller */
@media (max-width: 767.98px) {
  .home-logo {
    max-height: 50px; /* Smaller size for mobile */
  }
}


.clickable-row { cursor: pointer; }
thead a { text-decoration: none; color: inherit; }

/* New styles for the yellow grid and header */
.table-yellow-grid {
    border: 1px solid #ffc107; /* Yellow border for the whole table */
}
.table-yellow-grid th,
.table-yellow-grid td {
    border: 1px solid #ffc107; /* Yellow border for all cells */
}
.table-yellow-grid thead {
    background-color: #343a40; /* A dark grey for the header background */
    color: #ffffff; /* White text for the header */
}


/* Absence Request Report - Expandable Row Styles */

/* Notes column styling */
.absence-report-table .notes-preview {
    display: inline-block;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hide preview when expanded */
.absence-report-table td:has(.collapse.show) .notes-preview {
    display: none;
}

/* Style for collapsed slot lists - no scrollbar, full expansion */
.absence-report-table .collapse ul {
    max-height: none;
    overflow-y: visible;
}

/* Animate chevron in details button */
.absence-report-table button[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.absence-report-table button[aria-expanded="false"] .fa-chevron-down {
    transition: transform 0.3s ease;
}

/* Style for the details button */
.absence-report-table .btn-outline-info {
    font-size: 0.875rem;
}

/* Optional: Style for pending row highlighting */
.table-warning {
    background-color: #fff3cd !important;
    border-left: 4px solid #ffc107;
}

.table-warning:hover {
    background-color: #ffe69c !important;
}

/* Sortable table headers */
.absence-report-table thead th a {
    color: white;
    text-decoration: none;
    display: block;
    width: 100%;
}

.absence-report-table thead th a:hover {
    color: #f8f9fa;
}

.absence-report-table thead th a .fa-sort,
.absence-report-table thead th a .fa-sort-up,
.absence-report-table thead th a .fa-sort-down {
    margin-left: 5px;
    font-size: 0.85em;
}

/* Fixed table layout to prevent column width changes on expansion */
.absence-report-table {
    table-layout: fixed;
    width: 100%;
}

/* Set specific column widths */
.absence-report-table th:nth-child(1), 
.absence-report-table td:nth-child(1) {
    width: 15%; /* Staff Member */
}

.absence-report-table th:nth-child(2), 
.absence-report-table td:nth-child(2) {
    width: 12%; /* Reason */
}

.absence-report-table th:nth-child(3), 
.absence-report-table td:nth-child(3) {
    width: 13%; /* Absence Date */
}

.absence-report-table th:nth-child(4), 
.absence-report-table td:nth-child(4) {
    width: 10%; /* Status */
}

.absence-report-table th:nth-child(5), 
.absence-report-table td:nth-child(5) {
    width: 15%; /* Notes */
    word-wrap: break-word;
}

.absence-report-table th:nth-child(6), 
.absence-report-table td:nth-child(6) {
    width: 15%; /* Denial Reason */
}

.absence-report-table th:nth-child(7), 
.absence-report-table td:nth-child(7) {
    width: 5%; /* Private */
}

.absence-report-table th:last-child, 
.absence-report-table td:last-child {
    width: 15%; /* Time Periods */
}

/* Ensure collapsed content doesn't overflow */
.absence-report-table .collapse {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/*================

/* Reports Dropdown Styling */
.dropdown-menu {
    min-width: 280px;
}

.dropdown-header {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-secondary);
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: 0.25rem;
    padding-bottom: 0.25rem;
}

.dropdown-item {
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background-color: var(--bs-primary);
    color: white;
}

.dropdown-item:hover .material-icons {
    color: white !important;
}

/* Enhanced Reports Dropdown */
#reportsDropdown + .dropdown-menu {
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

#reportsDropdown + .dropdown-menu .dropdown-item {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    margin: 0.125rem 0.25rem;
}

#reportsDropdown + .dropdown-menu .dropdown-header {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0.5rem 0.25rem 0.25rem;
    padding: 0.25rem 0.75rem;
    border-bottom: 1px solid #dee2e6;
}

/* ==================================================
   APPRAISAL SYSTEM STYLES
   Scoped to prevent conflicts with other site styles
   ================================================== */

/* Appraisal Question Blocks - Base styles with CSS variables */
.appraisal-container .question-block {
    background: var(--question-block-gradient, linear-gradient(to right, #373b44, #4286f4)) !important;
    color: #fff;
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 2rem; /* Increased from default 1rem (mb-4) */
}

/* Or if you want even more spacing */
.appraisal-container .question-block.spaced {
    margin-bottom: 3rem;
}

/* Or for extra large spacing */
.appraisal-container .question-block.extra-spaced {
    margin-bottom: 4rem;
}

/* Color Variants */
.appraisal-container .question-block.variant-sunset {
    --question-block-gradient: linear-gradient(to right, #ff7e5f, #feb47b);
}

.appraisal-container .question-block.variant-ocean {
    --question-block-gradient: linear-gradient(to right, #2980b9, #6bb6ff);
}

.appraisal-container .question-block.variant-forest {
    --question-block-gradient: linear-gradient(to right, #134e5e, #71b280);
}

.appraisal-container .question-block.variant-purple {
    --question-block-gradient: linear-gradient(to right, #667eea, #764ba2);
}

.appraisal-container .question-block.variant-cherry {
    --question-block-gradient: linear-gradient(to right, #eb3349, #f45c43);
}

.appraisal-container .question-block.variant-mint {
    --question-block-gradient: linear-gradient(to right, #00b09b, #96c93d);
}

.appraisal-container .question-block.variant-amber {
    --question-block-gradient: linear-gradient(to right, #ff6b35, #f7931e);
}

.appraisal-container .question-block.variant-slate {
    --question-block-gradient: linear-gradient(to right, #2c3e50, #4a6741);
}

/* Progress Card Variants */
.appraisal-container .progress-card {
    background: var(--progress-card-gradient, linear-gradient(to right, #f8f9fa, #e9ecef));
    border: var(--progress-card-border, 1px solid #dee2e6);
}

.appraisal-container .progress-card.variant-sunset {
    --progress-card-gradient: linear-gradient(to right, #fff5f5, #fed7d7);
    --progress-card-border: 1px solid #feb2b2;
}

.appraisal-container .progress-card.variant-ocean {
    --progress-card-gradient: linear-gradient(to right, #ebf8ff, #bee3f8);
    --progress-card-border: 1px solid #90cdf4;
}

.appraisal-container .progress-card.variant-forest {
    --progress-card-gradient: linear-gradient(to right, #f0fff4, #c6f6d5);
    --progress-card-border: 1px solid #9ae6b4;
}

.appraisal-container .progress-card.variant-purple {
    --progress-card-gradient: linear-gradient(to right, #faf5ff, #e9d8fd);
    --progress-card-border: 1px solid #d6bcfa;
}

/* Progress bar color variants */
.appraisal-container .progress-card.variant-sunset .progress-bar {
    background-color: #f56565 !important;
}

.appraisal-container .progress-card.variant-ocean .progress-bar {
    background-color: #4299e1 !important;
}

.appraisal-container .progress-card.variant-forest .progress-bar {
    background-color: #48bb78 !important;
}

.appraisal-container .progress-card.variant-purple .progress-bar {
    background-color: #9f7aea !important;
}

/* Rating Options Layout - Scoped to appraisal containers */
.appraisal-container .rating-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.appraisal-container .rating-option {
    text-align: center;
    position: relative;
}

/* Hide radio buttons in appraisal forms */
.appraisal-container .rating-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Style labels as buttons in appraisal forms */
.appraisal-container .rating-option label {
    display: block;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0;
}

.appraisal-container .rating-option label:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Selected state for appraisal rating buttons */
/* .appraisal-container .rating-option input[type="radio"]:checked + label {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 1);
    color: #333 !important;
    font-weight: 600;
} */
 .appraisal-container .rating-option input[type="radio"]:checked + label {
    background: rgba(255, 193, 7, 0.9);
    border-color: rgba(255, 200, 10, 1);
    color: #333 !important;
    font-weight: 600;
}

.appraisal-container .rating-label {
    font-weight: 500;
    display: block;
    width: 100%;
}

/* Form controls in appraisal question blocks */
.appraisal-container .question-block .form-control {
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.appraisal-container .question-block .form-control:focus {
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
    background-color: rgba(255, 255, 255, 0.95);
}

/* Text colors for appraisal blocks */
.appraisal-container .text-white-50 {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Auto-save status indicator */
.appraisal-container .auto-save-status {
    font-size: 0.85rem;
    font-weight: 500;
}

/* Rating display for view pages */
.appraisal-container .rating-display {
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.appraisal-container .rating-badge {
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    display: inline-block;
}

.appraisal-container .rating-badge.rating-poor { 
    background-color: #dc3545 !important; 
    color: white;
}
.appraisal-container .rating-badge.rating-good { 
    background-color: #ffc107 !important; 
    color: black;
}
.appraisal-container .rating-badge.rating-very_good { 
    background-color: #0dcaf0 !important; 
    color: white;
}
.appraisal-container .rating-badge.rating-excellent { 
    background-color: #198754 !important; 
    color: white;
}

/* Comment box styling in appraisal views */
.appraisal-container .comment-box {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #333;
}

/* Progress bar styling for appraisals */
.appraisal-container .progress {
    height: 8px;
    border-radius: 4px;
}

/* Responsive adjustments for appraisal forms */
@media (max-width: 768px) {
    .appraisal-container .rating-options {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* Print styles for appraisal pages */
@media print {
    .appraisal-container .btn-group, 
    .appraisal-container .alert {
        display: none !important;
    }
    
    .appraisal-container .card {
        border: 1px solid #000 !important;
        break-inside: avoid;
    }
    
    .appraisal-container .question-block {
        break-inside: avoid;
        border: 1px solid #ccc !important;
        margin-bottom: 1rem;
        background: #f8f9fa !important;
        color: #000 !important;
    }
    
    .appraisal-container .text-white, 
    .appraisal-container .text-white-50 {
        color: #000 !important;
    }
    
    .appraisal-container .rating-badge {
        border: 1px solid #000 !important;
    }
    
    .appraisal-container .comment-box {
        border: 1px solid #000 !important;
        background: white !important;
    }
}

/* Leave Report - Sortable Headers */
.sortable-header a {
    text-decoration: none;
    color: inherit;
    display: block;
    padding: 0.5rem;
    margin: -0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.sortable-header a:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.sort-indicator {
    display: inline-flex;
    align-items: center;
}

.sort-indicator i {
    font-size: 18px;
}

.sortable-header a:hover .sort-indicator i.text-muted {
    color: #0d6efd !important;
}

/* Leave Year Selector - Gradient styling similar to Appraisal blocks a comment */
.leave-year-selector {
    background: linear-gradient(to right, #51708f, #79b7e0) !important;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.leave-year-selector .form-select {
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
}

.leave-year-selector .form-select:focus {
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
    background-color: #ffffff;
}

.leave-year-selector .text-white-50 {
    color: rgba(255, 255, 255, 0.7) !important;
}