/* OT Reports-specific styles for "View My Own OT" view */
.table-container {
    margin: 20px 0;
    width: 100%;
    overflow-x: auto;
}

.report-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    table-layout: fixed;
}

.report-table th,
.report-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85em;
    word-break: break-word;
}

/* --- Adjusted Column Widths for View Own OT --- */
.report-table th:nth-child(1), .report-table td:nth-child(1) { width: 70px; }  /* Serial No */
.report-table th:nth-child(2), .report-table td:nth-child(2) { width: 110px; white-space: nowrap; } /* Date */
.report-table th:nth-child(3), .report-table td:nth-child(3) { width: 200px; } /* Section */
.report-table th:nth-child(4), .report-table td:nth-child(4) { width: 200px; } /* Reason */
.report-table th:nth-child(5), .report-table td:nth-child(5) { width: 90px; }  /* OT Hours */
.report-table th:nth-child(6), .report-table td:nth-child(6) { width: 120px; white-space: nowrap; } /* Status */
.report-table th:nth-child(7), .report-table td:nth-child(7) { width: auto; }   /* Description */
.report-table th:nth-child(8), .report-table td:nth-child(8) { width: 90px; }   /* Action */
/* -------------------------------------------------------- */

.report-table th {
    background: #00c6ff;
    font-weight: 600;
    cursor: pointer;
    position: sticky;
    top: 0;
    z-index: 2;
}

.report-table th:hover {
    background: #0072ff;
}

.report-table tr.even-row {
    background: rgba(255, 255, 255, 0.05);
}

.report-table tr.odd-row {
    background: rgba(255, 255, 255, 0.03);
}

.report-table tr:hover {
    background: rgba(0, 198, 255, 0.1);
    transition: background 0.2s ease;
}

.report-table td.status-pending { color: #ffc107; }
.report-table td.status-approved { color: #28a745; }
.report-table td.status-validated { color: #17a2b8; }
.report-table td.status-rejected { color: #dc3545; }

.no-data { 
    text-align: center; 
    padding: 20px; 
    color: #ccc; 
    font-size: 1em; 
    background: rgba(255, 255, 255, 0.05); 
    border-radius: 8px; 
}

.error { 
    text-align: center; 
    padding: 15px; 
    color: #dc3545; 
    font-size: 0.95em; 
    background: rgba(255, 0, 0, 0.1); 
    border-radius: 8px; 
    margin-bottom: 20px; 
}

.filter-form { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    margin-bottom: 20px; 
    width: 100%; 
    overflow-x: auto; 
}

.filter-row { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 15px; 
    align-items: flex-end; 
}

.filter-row .input-group.full-width { 
    flex: 0 0 100%; 
    max-width: 1750px; 
}

.filter-container { 
    background: rgba(255, 255, 255, 0.05); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 10px; 
    padding: 20px; 
    margin-bottom: 25px; 
}

.filter-container h4 { 
    margin: 0 0 15px 0; 
    color: #00c6ff; 
    font-weight: 500; 
    font-size: 1.1em; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
    padding-bottom: 10px; 
}

.filter-container h4 .fas { 
    margin-right: 8px; 
}

.filter-row.primary-filters { 
    justify-content: flex-start; 
}

.filter-row.secondary-actions { 
    justify-content: space-between; 
}

.filter-row .input-group { 
    flex: 1 1 180px; 
    min-width: 180px; 
}

.filter-row .input-group.search-group { 
    flex: 1 1 40%; 
    max-width: 600px; 
}

.filter-form label { 
    display: block; 
    font-size: 0.9em; 
    font-weight: 500; 
    color: #b0c0d0; 
    margin-bottom: 5px; 
}

.filter-form input, 
.filter-form select { 
    width: 100%; 
    padding: 8px; 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    border-radius: 6px; 
    background: #2c5364 !important; 
    color: #e0f0ff !important; 
    font-size: 0.9em; 
    font-family: 'Poppins', sans-serif; 
}

.filter-form input[type="date"] { 
    color-scheme: dark; 
    padding: 6.5px 8px; 
}

.filter-form input[type="date"]::-webkit-calendar-picker-indicator { 
    filter: invert(1) brightness(0.8); 
    cursor: pointer; 
}

.filter-buttons { 
    display: flex; 
    gap: 10px; 
}

.filter-buttons button { 
    padding: 8px 16px; 
    border-radius: 6px; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-size: 0.9em; 
    border: none; 
    cursor: pointer; 
}

.filter-buttons .clear-btn { 
    background-color: #6c757d; 
    color: #fff; 
}

.filter-buttons .clear-btn:hover { 
    background-color: #5a6268; 
}

.filter-buttons .export-excel-btn { 
    background-color: #218838; 
    color: #fff; 
}

.filter-buttons .export-excel-btn:hover { 
    background-color: #1e7e34; 
}

.filter-buttons .export-pdf-btn { 
    background-color: #c82333; 
    color: #fff; 
}

.filter-buttons .export-pdf-btn:hover { 
    background-color: #b21f2d; 
}

.modal { 
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.5); 
    justify-content: center; 
    padding-top: 5vh; 
}

#editModal .modal-content.compact { 
    width: 100%; 
    max-width: 800px; 
    background: #203A43; 
    border-radius: 10px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); 
    margin: 0 20px 20px 20px; 
    color: #e0f0ff; 
    overflow: hidden; 
}

#editModal .modal-header { 
    background: linear-gradient(90deg, #0072ff, #00c6ff); 
    color: #fff; 
    padding: 15px 25px; 
    font-size: 1.3em; 
    font-weight: 500; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
}

#editModal .modal-header .fas { 
    margin-right: 10px; 
}

#editModal .modal-header .close { 
    font-size: 1.5rem; 
    color: #fff; 
    opacity: 0.8; 
    cursor: pointer; 
    transition: opacity 0.2s ease; 
    padding: 0; 
    background: none; 
    border: none; 
}

#editModal .modal-header .close:hover { 
    opacity: 1; 
}

#editModal .modal-body { 
    padding: 25px; 
}

#editModal .form-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; 
    align-items: end; 
}

#editModal .form-grid .form-group { 
    display: flex; 
    flex-direction: column; 
}

#editModal .form-grid .grid-col-span-2 { 
    grid-column: span 2; 
}

#editModal .form-grid .grid-col-span-4 { 
    grid-column: span 4; 
}

#editModal .form-group label { 
    margin-bottom: 6px; 
    font-size: 0.9em; 
    font-weight: 500; 
    color: #b0c0d0; 
}

#editModal .form-group input, 
#editModal .form-group select, 
#editModal .form-group textarea { 
    width: 100%; 
    padding: 8px; 
    font-size: 0.9em; 
    border: 1px solid rgba(255,255,255,0.2); 
    border-radius: 6px; 
    background: #2c5364; 
    color: #e0f0ff; 
    box-sizing: border-box; 
    font-family: 'Poppins', sans-serif; 
}

#editModal .form-group textarea { 
    min-height: 80px; 
    resize: vertical; 
}

#editModal input[type="date"] { 
    color-scheme: dark; 
}

#editModal input[type="date"]::-webkit-calendar-picker-indicator { 
    filter: invert(1) brightness(0.8); 
    cursor: pointer; 
}

#editModal .modal-footer { 
    background: rgba(0,0,0,0.2); 
    padding: 15px 25px; 
    text-align: right; 
    display: flex; 
    justify-content: flex-end; 
    gap: 10px; 
}

#editModal .modal-footer button { 
    padding: 8px 20px; 
    font-size: 0.95em; 
    border: none; 
    border-radius: 6px; 
    cursor: pointer; 
    transition: all 0.2s ease; 
}

#editModal .modal-footer .save-button { 
    background: linear-gradient(90deg, #0072ff, #00c6ff); 
    color: #fff; 
}

#editModal .modal-footer .save-button:hover { 
    box-shadow: 0 0 10px rgba(0,198,255,0.6); 
}

#editModal .modal-footer .cancel-button { 
    background: #6c757d; 
    color: #fff; 
}

#editModal .modal-footer .cancel-button:hover { 
    background: #5a6268; 
}

#editModal .modal-footer .delete-button { 
    background: #c82333; 
    color: #fff; 
    margin-right: auto; 
}

#editModal .modal-footer .delete-button:hover { 
    background: #a71d2a; 
}

#loading-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.6); 
    z-index: 9999; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.spinner { 
    border: 5px solid rgba(255,255,255,0.2); 
    border-top: 5px solid #00c6ff; 
    border-radius: 50%; 
    width: 50px; 
    height: 50px; 
    animation: spin 1s linear infinite; 
}

@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

.toast-notification { 
    visibility: hidden; 
    position: fixed; 
    bottom: 30px; 
    right: 30px; 
    min-width: 250px; 
    background-color: #333; 
    color: #fff; 
    text-align: center; 
    border-radius: 5px; 
    padding: 16px; 
    z-index: 10000; 
    font-size: 1em; 
    box-shadow: 0 0 10px rgba(0,0,0,0.5); 
    opacity: 0; 
    transition: visibility 0.5s, opacity 0.5s, transform 0.5s; 
    transform: translateX(100%); 
}

.toast-notification.show { 
    visibility: visible; 
    opacity: 1; 
    transform: translateX(0); 
}

.toast-notification.success { 
    background-color: #28a745; 
}

.toast-notification.error { 
    background-color: #dc3545; 
}

.edit-button { 
    background: linear-gradient(90deg, #0072ff, #00c6ff); 
    color: #fff; 
    padding: 8px 16px; 
    border: none; 
    border-radius: 8px; 
    font-size: 0.9em; 
    cursor: pointer; 
    transition: background 0.2s ease; 
}

.edit-button:hover { 
    background: linear-gradient(90deg, #005bb5, #0096c7); 
}