/* General Table Styling */

.custom-table {

    width: 100%; 

    margin-bottom: 15px;

    border-collapse: collapse; 

}



.custom-table th, .custom-table td {

    font-size: 12px; 

    white-space: normal; 

    word-wrap: break-word; 

    vertical-align: middle; 

    text-align: center; /* Ensure all text in the table is center-aligned */

}



.custom-table th {

    background-color: #f8f9fa; /* Light grey background for headers */

    text-align: center;

}



.custom-table td {

    padding: 8px; 

}



.custom-table th:nth-child(4), /* Description header */

.custom-table td:nth-child(4) { /* Description data cells */

    width: auto;

    word-break: break-word;

    white-space: normal;

}



/* Zebra stripe for the table rows */

.custom-table tbody tr:nth-of-type(odd) {

    background-color: rgba(0, 0, 0, 0.05);

}



/* Responsive adjustments */

@media (max-width: 768px) {

    .custom-table {

        font-size: 10px; 

    }



    .custom-table th, .custom-table td {

        padding: 5px; 

    }



    .custom-table th:nth-child(4), /* Description header */

    .custom-table td:nth-child(4) {

        width: 100%;

        white-space: normal; 

    }

}



/* Highlight the most recent row */

.custom-table tbody tr.highlight {

    background-color: #dff0d8; /* Light green background for the latest row */

}





/* Prevent button text from wrapping */

button {

    white-space: nowrap; /* Keep button text on a single line */

}





body {

    background-color: #f4f4f4;

    font-family: 'Arial', sans-serif;

}



.container {

    padding-left: 1cm;

    padding-right: 1cm;

}



/* Styling for the header row */

.header-row {

    background-color: #ffffff; /* Solid white background */

    color: #333333; /* Dark text for readability */

    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow for depth */

    align-items: center; /* Center items vertically */

    padding: 0 15px; /* Padding on sides for spacing */

    height: 50px;

    border-bottom: 2px solid; /* Base border size */

    border-image-slice: 1; /* Enables the gradient to be used as border image */

    border-image-source: linear-gradient(to left, #007BFF 0%, #00f2fe 100%); /* Light blue gradient */

}





.navbar-brand, .nav-link {

    color: #007BFF; /* Blue for links for better visibility */

    font-weight: bold;

    text-decoration: none;

}



.username {

    color: #007BFF; /* Blue for username */

    font-style: italic;

    font-weight: normal;

}



/* Styling for the clock and date */

.clock, .date {

    font-size: 16px; /* Slightly smaller font */

    font-weight: normal; /* Normal weight to keep it simple */

    background-color: #f8f9fa; /* Light grey background */

    padding: 5px 10px;

    border-radius: 5px;

    margin: 0 5px; /* Spacing between clock and date */

}



.nav-link.logout {

    color: #dc3545; /* Bootstrap 'danger' color for logout to highlight it */

    padding: 5px 10px;

    border-radius: 5px;

    background-color: #f8f9fa; /* Matching background to clock/date */

    transition: color 0.3s, background-color 0.3s; /* Smooth transition for hover effects */

    display: inline-block; /* Ensures the padding and background affect only the text area */

    text-decoration: none; /* Removes underline from links */

}



.nav-link.logout:hover {

    color: #ffffff; /* White text on hover */

    background-color: #dc3545; /* Dark red background on hover */

}







.card {

    box-shadow: 0 2px 4px rgba(0,0,0,.1);

    border: none;

}



.card-title {

    color: #333;

    font-weight: bold;

}



.btn-custom {

    width: 100%;

    padding: 12px;

    margin-top: 5px;

    background-color: #d6e2ed; /* Light gray background */

    color: #333; /* Dark text for readability */

    border: 1px solid #ddd; /* Subtle borders */

    border-radius: 4px; /* Rounded corners */

    transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transitions for interactive effects */

}



/* Specific styles for different actions to maintain minimal but distinct differences */

.btn-custom.btn-start {

    border-color: #cce5ff; /* Lighter blue border */

}



.btn-custom.btn-info {

    border-color: #ffeeba; /* Lighter yellow border */

}



.btn-custom.btn-warning {

    border-color: #f5c6cb; /* Lighter red border */

}



.btn-custom.btn-primary {

    border-color: #b8daff; /* Blue border */

}



.btn-custom.btn-secondary {

    border-color: #e2e3e5; /* Gray border */

}



.btn-custom.btn-danger {

    border-color: #f5c6cb; /* Red border */

}



.btn-custom:hover {

    background-color: #e2e3e5; /* Slightly darker on hover for better interaction feedback */

    box-shadow: 0 2px 5px rgba(0,0,0,0.15); /* Subtle shadow for depth */

}



.btn-custom:disabled {

    background-color: #cccccc; /* Grey out for disabled state */

    color: #666666; /* Darker text to indicate non-interactivity */

    cursor: not-allowed; /* Cursor to indicate disabled state */

}

#show {

    background-color: #007BFF; /* Grey background */

    color: #f6f6f6; /* Dark text for visibility */

    border: 1px solid #007BFF; /* Slightly darker border for definition */

    transition: background-color 0.3s, color 0.3s; /* Smooth transition for background and text color */

}



#show:hover {

    background-color: #bbbbbb; /* Blue background on hover */

    color: #ffffff; /* White text on hover */

}





/* Real-time Clock and Date Styles */

.clock:before, .date:before {

    content: attr(data-label) " ";

    color: #6c757d;

    font-weight: bold;

}



.pagination {

    text-align: center; /* Center the pagination controls */

    margin-top: 20px; /* Add some space above the pagination controls */

    padding: 10px 0; /* Padding for better touch interaction */

}



.page-num {

    display: inline-block; /* Display as inline-block for alignment */

    margin-right: 5px; /* Space between buttons */

    padding: 5px 10px; /* Padding inside the buttons */

    background-color: #f8f9fa; /* Light grey background */

    border: 1px solid #ddd; /* Slight border */

    color: #007BFF; /* Bootstrap primary blue color for text */

    cursor: pointer; /* Pointer cursor on hover */

    border-radius: 5px; /* Rounded corners for aesthetics */

}



.page-num.active {

    background-color: #007BFF; /* Bootstrap primary blue for active page */

    color: #ffffff; /* White text for contrast */

}



.page-num:hover {

    background-color: #0056b3; /* Slightly darker blue on hover */

    color: #ffffff; /* White text for readability */

}



/* Add this to your CSS file */

.textarea-singleline {

    overflow-y: auto;

    resize: vertical;  /* or 'resize: vertical;' if you want to allow vertical resizing */

}



.in-progress {

    background-color: lightyellow;

}



.complete {

    background-color:#E0FFFF;

}



.paused {

    background-color:#FFE0FF; /* Light red color for paused tasks */

}



/* class to hightligt latest break in live */

.highlight-latest {

    background-color: #c6cff7; /* Light yellow background to highlight */

    

}

/*css for link taskID on task.php*/

.task-link {

    color: #007bff; /* A noticeable blue color to indicate it's clickable */

    text-decoration: underline; /* Underline to clearly indicate it's a link */

    cursor: pointer; /* Change cursor to pointer to indicate it's clickable */

}



.task-link:hover {

    color: #0056b3; /* Slightly darker blue on hover for a subtle effect */

}



/* Style to make tabs look inactive */

.disabled-tabs {

    pointer-events: none;  /* Prevent clicking */

    opacity: 0.5;          /* Make it visually appear inactive */

}



/*css for .description-cell*/

.description-cell {

    position: relative;

}



.description-controls {

    position: absolute;

    top: 5px;

    right: 5px;

}



.description-controls button {

    background: none;

    border: none;

    cursor: pointer;

    font-size: 14px;

    margin-left: 5px;

}



.description-edit {

    width: 100%;

    box-sizing: border-box;

}



.description-controls .edit-icon {

    display: inline-block;

    width: 24px;

    height: 24px;

    border-radius: 50%;

    background-color: #007bff;  /* Bright blue for visibility */

    color: white;

    font-size: 16px;

    font-weight: bold;

    text-align: center;

    line-height: 24px;

    cursor: pointer;

    margin-right: 5px;

}



.description-controls .save-icon {

    display: inline-block;

    width: 24px;

    height: 24px;

    border-radius: 50%;

    background-color: #28a745;  /* Bright green for visibility */

    color: white;

    font-size: 16px;

    text-align: center;

    line-height: 24px;

    cursor: pointer;

    margin-left: 5px;

}



.description-cell:hover .edit-icon {

    transform: scale(1.1);  /* Slightly enlarge on hover */

}



.description-cell:hover .save-icon {

    transform: scale(1.1);  /* Slightly enlarge on hover */

}


/*when clicking of task id under tasks - below styling is for that modal*/

.modal-body {
    overflow-x: auto;
    max-height: 70vh; /* Adjust height as needed */
    overflow-y: auto;
    overflow-x: auto; /* optional: if table width exceeds */
    padding: 10px;
}

.task-note-block {
    font-size: 0.85em;
    padding-left: 5px;
    border-left: 2px solid #007bff;
    margin-top: 5px;
}

.description-heading {
                    text-align: left;
                    margin-bottom: 12px;
                    padding: 2px;
                    background:rgb(251, 253, 227); /* Light blue background */
                    border-left: 5px solid #007bff; /* Blue left border */
                    border-radius: 5px;
                    font-size: 12px;
                    color: #0056b3;
}

#taskLogsTable th {
    font-size: 0.8rem;
    padding: 4px 6px;
    white-space: nowrap;
}

#taskLogsTable td {
    font-size: 0.8rem;
    padding: 4px 6px;
    vertical-align: top;
}

#taskLogsTable th:last-child,
#taskLogsTable td:last-child {
    font-weight: bold;
    color: #222;
}