/* Box-sizing reset for consistent layout */
html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}

/* General Body and Layout */
body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    line-height: 1.6;
    background: #f4f4f4;
    color: #333;
    padding: 20px; /* Adjusted: Default padding for larger screens */
    font-size: 0.95em; /* ADDED: Slightly smaller base font size for screens wider than 480px */
}

/* Main Container - Added for consistent layout and centering */
main {
    max-width: 900px; /* Maximum width for content */
    margin: 20px auto; /* Center the container on the page */
    padding: 20px; /* Inner padding for the main content area */
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* Subtle shadow for depth */
}

/* Header Styling */
header {
    background-color: #ffffff; /* Clean white background for the header */
    max-width: 900px; /* Match max-width of main */
    margin: 0 auto 20px auto; /* Center and provide bottom margin */
    padding: 20px; /* Original padding, adjusted for inner flex content */
    border-bottom: 1px solid #eee; /* A subtle light grey line at the bottom */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Very subtle shadow for a sense of elevation */
    text-align: left; /* Align content to the left */
    /* Removed background-image properties as image is now an <img> tag */
    background-image: none;
}

/* Container for header text and image */
.header-content {
    display: flex; /* Use flexbox for side-by-side layout */
    justify-content: space-between; /* Push text to left, image to right */
    align-items: center; /* Vertically align items */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 10px; /* Space between text and image */
}

.header-text {
    flex-basis: 70%; /* Text takes up 70% of the space, increased to accommodate smaller image */
    flex-grow: 1; /* Allow text to grow */
    color: #0056b3; /* Set color for the text container */
}

.header-image {
    flex-basis: 25%; /* Image takes up 25% of the space, making it smaller */
    flex-grow: 1; /* Allow image to grow */
    /* text-align: left; /* Removed as it's not effective for block-level img alignment */
}

.header-image img {
    max-width: 100%; /* Ensure image scales within its container */
    height: auto; /* Maintain aspect ratio */
    max-height: 80px; /* Added max-height to control vertical size */
    display: block; /* Ensure it behaves like a block element for margin control */
    margin-left: 0; /* Align to the left */
    margin-right: auto; /* Push content to the left within its container */
    object-fit: contain; /* Ensure the image fits within its box without cropping */
}


header h1 {
    margin: 0; /* Remove default margin from h1 to control spacing via header padding */
    font-size: 34px; /* Increased for more prominence */
    font-weight: 500; /* Medium weight */
    color: #0056b3; /* Branded blue color for the header text */
    /* Removed text-shadow and color: white as it's now in header-text div and needs new color */
}

/* Horizontal Rule (separator) */
hr {
    border: none;
    border-top: 1px solid #eee;
    margin: 20px 0;
}

/* Section Headings */
h2 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.2em;
}

/* Form Styling */
form {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    gap: 10px; /* Space between form elements */
    align-items: center; /* Vertically align items */
    margin-bottom: 20px;
    /* NEW: Explicitly align items to the start within the form's flex container */
    justify-content: flex-start;
}

/* NEW: Style for h2 specifically within a form */
form h2 {
    width: 100%; /* Make the h2 take full width within the flex container */
    margin-top: 0; /* Remove default top margin to align properly with the form's top */
    margin-bottom: 15px; /* Add space below the heading before the inputs */
    text-align: left; /* Ensure text alignment is left */
    font-size: 1.2em; /* Adjust font size relative to parent, if needed */
    color: #333; /* Ensure consistent text color */
}

input[type="text"] {
    flex: 1; /* Allows inputs to grow and shrink */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 150px; /* Ensure inputs don't get too small */
}

/* Buttons (General Styles - primarily for buttons outside the table like "Add Task" and "Clear All Tasks") */
button {
    padding: 5px 10px; /* Default padding */
    min-height: unset; /* Allow natural sizing */
    background-color: #007bff; /* Default blue, overridden by specific classes */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 1em; /* Default font size */
}

/* Input and Button Focus States for Accessibility */
input[type="text"]:focus,
button:focus {
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* Subtle blue glow on focus */
}

/* Specific button colors and hovers */
form button[type="submit"] { /* "Add Task" button */
    background-color: #28a745; /* Green for add */
}
form button[type="submit"]:hover {
    background-color: #218838;
}

.start-complete-btn {
    background-color: #28a745; /* Green for Start */
}
.start-complete-btn:hover {
    background-color: #218838;
}

.pause-btn {
    background-color: #ffc107; /* Yellow for Pause */
    color: #333; /* Darker text for contrast on yellow */
}
.pause-btn:hover {
    background-color: #e0a800;
}

.resume-btn {
    background-color: #17a2b8; /* Cyan for Resume */
}
.resume-btn:hover {
    background-color: #138496;
}

.delete-btn {
    background-color: #dc3545; /* Red for Delete */
}
.delete-btn:hover {
    background-color: #c82333;
}

/* Clear Data Button */
#clearDataBtn {
    background-color: #6c757d; /* Neutral grey */
    color: white;
    padding: 8px 15px; /* Consistent padding */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 20px; /* Space above button */
    float: right; /* Position to the right */
}
#clearDataBtn:hover {
    background-color: #5a6268;
}


/* Table Styling */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    padding: 5px 12px; /* Reduced top/bottom padding to 5px for less row height */
    border: 1px solid #ddd;
    text-align: left;
}

th {
    background-color: #007bff;
    color: white;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* Flex container for action buttons within the combined cell */
.action-buttons {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center; /* THIS LINE WAS CHANGED/ADDED */
    align-items: center;
}

/* Unified styling for ALL buttons WITHIN the table */
.start-complete-btn,
.action-buttons button {
    flex-shrink: 0; /* Prevent buttons from shrinking too much */
    padding: 4px 8px;   /* Unified padding for all table buttons */
    font-size: 0.85em; /* Unified font size for all table buttons */
}

/* NEW: Style for the combined Timer / Actions cell */
.timer-actions-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center; /* THIS LINE WAS CHANGED/ADDED */
    align-items: center;
}


/* ART cell glow for "In Progress" */
@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.4); /* Start with a subtle blue blue */
        border-color: rgba(0, 123, 255, 0.6); /* Also animate border color slightly */
    }
    50% {
        box-shadow: 0 0 15px rgba(0, 123, 255, 0.8); /* Max glow intensity */
        border-color: rgba(0, 123, 255, 1); /* Full blue border */
    }
    100% {
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.4); /* Return to subtle glow */
        border-color: rgba(0, 123, 255, 0.6);
    }
}

.art.in-progress {
    animation: pulse-glow 2s infinite alternate; /* Apply the animation: 2s duration, infinite, alternates direction */
    transition: all 0.2s ease-in-out; /* Smooth transition for class addition/removal */
    border: 1px solid #007bff; /* Base border color when glowing */
}

/* ART cell style for "Paused" */
.art.paused {
    background-color: rgba(220, 220, 220, 0.3); /* A light grey, semi-transparent background */
    border-color: #bbb; /* A slightly darker, muted border */
    font-style: italic; /* Makes the text slightly italic to emphasize the 'paused' state */
    color: #555; /* Slightly muted text color */
    transition: background-color 0.2s ease, border-color 0.2s ease, font-style 0.2s ease, color 0.2s ease; /* Smooth transition */
}

/* Diff column emphasis */
.diff {
    font-weight: bold;
}

/* Editable cell visual cues */
.editable:hover {
    cursor: pointer; /* Change cursor to indicate clickability */
    background-color: #f9f9f9; /* Light background highlight on hover */
}
.editable:focus {
    outline: 1px solid #007bff; /* A clear border when editing */
    background-color: #fff; /* Ensure white background when focused */
}

/* Style for the summary separator row */
.summary-separator td {
    border-top: none; /* Remove distinct line */
    padding-top: 0; /* Remove space above */
    padding-bottom: 0; /* Remove small padding below */
    background-color: transparent; /* Ensure no background on the separator cell itself */
    line-height: 0; /* Collapse line height */
    height: 0; /* Collapse height */
    overflow: hidden; /* Hide any overflow */
}

.summary-separator hr {
    display: none; /* Hide the horizontal line element */
}

/* Style for the summary rows */
.summary-row {
    background-color: transparent !important; /* Ensure no background, override nth-child(even) */
    font-weight: bold;
}

.summary-row td {
    border-bottom: 1px dashed #a8d9ff; /* Light dashed border for summary rows */
    padding-top: 8px;
    padding-bottom: 8px;
}

.summary-row:last-child td {
    border-bottom: 1px dashed #a8d9ff; /* Ensure the last summary row also has a bottom border */
}


/* Responsive Table for Smaller Screens */
@media (max-width: 768px) {
    body {
        padding: 10px; /* Reduced padding for smaller screens */
    }

    main {
        margin: 10px auto; /* Adjust margin for smaller screens */
        padding: 15px; /* Adjust padding for smaller screens */
    }

    form {
        flex-direction: column; /* Stack form items vertically */
        align-items: stretch; /* Stretch items to full width */
    }

    input[type="text"] {
        width: 100%; /* Full width for inputs */
        min-width: unset; /* Remove min-width constraint */
    }

    form button[type="submit"] {
        width: 100%; /* Full width for submit button */
    }

    table, thead, tbody, th, td, tr {
        display: block; /* Make table elements behave like block elements */
    }

    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px; /* Hide table headers */
    }

    tr {
        border: 1px solid #ccc;
        margin-bottom: 15px;
        border-radius: 8px;
        overflow: hidden; /* Ensure rounded corners are visible */
    }

    td {
        border: none; /* Remove individual cell borders */
        border-bottom: 1px solid #eee; /* Add separator between data labels */
        position: relative;
        padding-left: 100px; /* Space for the data label */
        text-align: right; /* Align cell content to the right */
    }

    td:last-child {
        border-bottom: 0; /* No border for the last cell in a "card" */
    }

    td::before {
        content: attr(data-label); /* Use data-label for pseudo-elements */
        position: absolute;
        left: 0;
        width: 85px;
        padding-left: 10px;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: #555;
        box-sizing: border-box;
    }

    /* UPDATED: Special alignment for the combined Timer / Actions cell (now 7th column) */
    #taskTable td:nth-child(7) {
        /* Set padding-left to match other cells which have a data-label,
           this makes its content start at a similar horizontal position. */
        padding-left: 12px; /* Matches the padding-left of other TDs for data content */
        padding-right: 12px; /* Keep existing right padding */
        /* Align content to the start (left) within the flex container */
        justify-content: center;
        /* Ensure text-align is left, as content is now flex and not pure text for right align */
        text-align: left;
        display: flex; /* Make the cell itself a flex container */
        flex-wrap: wrap; /* Allow buttons to wrap */
        align-items: center; /* Center buttons vertically */
        gap: 10px; /* Gap between direct children (timer button and action-buttons div) */
    }

    /* Hide data-label for the combined button cell */
    #taskTable td:nth-child(7)::before {
        content: ''; /* Hide the label for button cells */
    }

    /* Responsive styles for summary rows (to align with data-labels) */
    .summary-row td {
        text-align: right; /* Align content to the right as in other data cells */
        padding-left: 100px; /* Match padding of other data cells for alignment */
        position: relative; /* Needed for data-label positioning */
    }

    .summary-row td::before {
        content: attr(data-label); /* Show data-label for summary cells */
        position: absolute;
        left: 0;
        width: 85px;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: #555;
        box-sizing: border-box;
    }

    /* Specific override for the 'Daily Totals' label cell to keep its text align */
    .summary-row td:nth-child(2) { /* The 'Daily Totals:' cell */
        text-align: right; /* Keep content aligned right */
        padding-left: 100px;
    }
    .summary-row td:nth-child(2)::before {
        content: attr(data-label);
        text-align: left; /* Label itself stays left */
    }

    /* Responsive adjustment for header content stacking */
    @media (max-width: 600px) { /* Adjust breakpoint as needed */
        .header-content {
            flex-direction: column; /* Stack text and image vertically */
            text-align: center; /* Center text when stacked */
        }

        .header-text, .header-image {
            flex-basis: 100%; /* Take full width when stacked */
            text-align: center; /* Center image when stacked */
        }
    }
}

/* Optional: Even smaller screens (e.g., very narrow phones) */
@media (max-width: 480px) {
    body {
        font-size: 0.9em;
    }

    header h1 { /* Corrected specificity */
        font-size: 24px; /* Applied the desired font size */
    }

    h1 {
        font-size:24px;
    }

    h2 {
        font-size: 1.2em;
    }

    td {
        padding-left: 80px;
    }

    td::before {
        width: 70px;
    }
}