/* CSS Styles */

:root {
    --primary-color: #007bff; /* A shade of blue for buttons, etc. */
    --text-color: #333;
    --border-color: #ccc;
    --background-light: #f4f4f4;
    --background-white: #fff;
    --success-color: #28a745; /* Green for edited shifts */
    --error-color: #dc3545; /* Red for validation errors */
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 10px;
    background-color: var(--background-light);
    color: var(--text-color);
    box-sizing: border-box;
}

.pcal-calculator-container {
    max-width: 900px; /* Max width for larger screens */
    margin: 20px auto !important; /* Added !important */
    background-color: var(--background-white);
    border-radius: 8px; /* Fixed typo: 8-px to 8px */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 15px !important; /* Added !important */
    box-sizing: border-box;
}

/* Controls (Checkboxes) */
.pcal-controls {
    display: flex;
    flex-direction: column; /* Stack on mobile */
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.pcal-checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pcal-checkbox-group input[type="checkbox"] {
    transform: scale(1.2);
    accent-color: var(--primary-color); /* Style checkbox accent */
}

/* Day Entries */
.pcal-day-entries {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pcal-day {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 15px !important; /* Added !important */
    background-color: #fafafa;
    margin: 0 !important; /* Added !important to prevent external margin interference */
}

.pcal-day h3 {
    margin-top: 0;
    margin-bottom: 15px; /* Default margin for mobile */
    color: var(--primary-color);
    text-align: center; /* Default alignment for mobile */
}

.pcal-time-entry {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    gap: 5px; /* Unified gap for all children */
    flex-wrap: wrap; /* Allow wrapping on very small screens */
}

.pcal-time-entry .pcal-label {
    flex: 1 1 100px; /* Allow label to take space, minimum 100px */
    font-weight: bold;
    min-width: 80px; /* Ensure labels don't get too squished */
}

.pcal-time-entry input[type="number"],
.pcal-time-entry select {
    font-family: inherit; /* Ensure font is inherited */
}

.pcal-time-entry input[type="number"] {
    width: 45px; /* Adjust width for hour/minute inputs */
    padding: 8px 5px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    text-align: center;
    -moz-appearance: textfield; /* Hide arrows on Firefox */
}

/* Hide arrows for Webkit browsers (Chrome, Safari) */
.pcal-time-entry input[type="number"]::-webkit-outer-spin-button,
.pcal-time-entry input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pcal-time-entry select {
    padding: 8px 5px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--background-white);
    cursor: pointer;
}

.pcal-time-entry .pcal-colon {
    font-weight: bold;
}


.pcal-hours-worked {
    text-align: right;
    font-weight: bold;
    margin-top: 0; /* Adjusted for mobile */
    padding: 5px;
    background-color: #e9ecef;
    border-radius: 4px;
    text-align: center; /* Center for mobile */
    color: #555;
}

.pcal-hours-worked .pcal-calculated-hours {
    color: var(--primary-color);
}

/* Ensure hidden elements are actually hidden, with higher specificity if needed */
select.pcal-hidden {
    display: none !important;
}

/* Validation Styling */
input.pcal-invalid { /* Updated class name to pcal-invalid */
    border-color: var(--error-color) !important;
    box-shadow: 0 0 3px var(--error-color) !important;
}

/* New checkbox styling for "Apply" options */
.pcal-apply-label-container {
    display: flex; /* Changed to flex for better control over children */
    flex-direction: column; /* Stack label and checkboxes on mobile */
    align-items: flex-start; /* Align left on mobile */
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed var(--border-color);
    margin-bottom: 10px; /* Space between label and floating checkboxes */
    width: 100%; /* Take full width on mobile */
}

.pcal-apply-label {
    font-weight: bold;
    font-size: 0.95em;
    margin-bottom: 5px; /* Space below label if it wraps */
}

.pcal-checkboxes-float-right {
    display: flex;
    flex-direction: column; /* Stack on mobile by default */
    align-items: flex-start; /* Align left on mobile */
    gap: 5px; /* Gap between stacked checkboxes */
    width: 100%; /* Take full width of parent on mobile */
}

.pcal-checkboxes-float-right label {
    white-space: nowrap; /* Prevent text wrapping */
    font-size: 0.8em; /* Smaller font size */
    display: flex; /* To align checkbox and text nicely */
    align-items: center;
    gap: 4px;
}

.pcal-checkboxes-float-right input[type="checkbox"] {
    transform: scale(0.9); /* Make checkbox visual smaller too */
    accent-color: var(--primary-color);
}


/* Summary Section */
.pcal-summary-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid var(--primary-color);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pcal-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
}

.pcal-summary-item:last-of-type {
    border-bottom: none;
}

.pcal-summary-item .pcal-label {
    font-weight: bold;
    flex-basis: 60%; /* Adjust as needed */
}

.pcal-summary-item .pcal-value {
    font-weight: bold;
    color: var(--primary-color);
    text-align: right;
    flex-basis: 40%;
}

.pcal-summary-item input[type="number"] {
    width: 100px;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    text-align: right;
    font-weight: bold;
}

.pcal-summary-item.pcal-total-paycheck {
    margin-top: 15px;
    font-size: 1.3em;
    padding: 12px 0;
    border-top: 2px solid var(--primary-color);
    background-color: #e6f2ff; /* Light blue background for total */
    border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Desktop / Tablet adjustments */
@media (min-width: 768px) {
    .pcal-controls {
        flex-direction: row;
        justify-content: space-around;
    }
    .pcal-controls .pcal-checkbox-group:last-child {
        margin-left: auto; /* Push the last checkbox group to the right */
    }


    .pcal-day {
        display: grid !important; /* Added !important */
        /* Define columns: label, h, :, m, ampm, flex-space for hours worked and apply section */
        grid-template-columns: minmax(100px, 1.2fr) min-content min-content min-content min-content 1fr !important; /* Keep 6 columns */
        gap: 10px 0px; /* Row gap 10px, column gap 0px for grid cells */
        align-items: start; /* Align items to the top of their grid areas */
        padding: 20px;
    }

    /* Place Day Label (h3) on the first row, spanning to accommodate it */
    .pcal-day h3 {
        grid-column: 1 / 5; /* Spans Label, Hour, Colon, Minute columns area */
        grid-row: 1;
        text-align: left;
        margin-bottom: 0;
        align-self: center; /* Vertically center with the content next to it if needed */
    }

    /* New container for the right-aligned elements in the header area */
    .pcal-header-right-section {
        grid-column: 6 / 7; /* Place in the rightmost grid column */
        grid-row: 1; /* Keep on the first row, same as h3 */
        display: flex;
        flex-direction: column; /* Stack hours worked and apply container */
        align-items: flex-end; /* Align all children to the right */
        gap: 5px; /* Small gap between hours worked and apply section */
        justify-self: end; /* Align the section itself to the end of the grid cell */
    }

    .pcal-hours-worked {
        /* No grid properties here, now managed by parent flex container */
        text-align: right; /* Ensure text alignment is right */
        margin-top: 0; /* Clear previous margins */
        padding: 5px 10px; /* Adjust padding if needed */
        font-size: 0.9em;
        white-space: nowrap;
        box-sizing: border-box;
        width: max-content; /* Make it shrink to content width */
        min-width: 100px; /* Prevent it from becoming too narrow */
    }

    /* Apply label container now nested deeper */
    .pcal-apply-label-container {
        /* No grid properties here, now managed by parent flex container */
        display: flex; /* Keep as flex to manage its own children (label and checkboxes) */
        flex-direction: column; /* Stack label and checkboxes within this container */
        align-items: flex-end; /* Align contents of this container to the right */
        gap: 2px; /* Smaller gap between label and checkboxes */
        margin-top: 0; /* Clear previous margins */
        padding: 0; /* Clear previous padding */
        border-top: none; /* Clear previous border */
        margin-bottom: 0; /* Clear previous margins */
        width: 100%; /* Allow it to take full width of its parent to enable wrapping */
    }
    .pcal-apply-label {
        text-align: right; /* Ensure the label text itself aligns right */
        width: 100%; /* Take full width of its flex parent */
    }

    .pcal-checkboxes-float-right {
        /* No grid properties here */
        display: flex; /* Keep as flex to manage its own children */
        flex-direction: row; /* Keep checkboxes inline */
        flex-wrap: wrap; /* Allow wrapping */
        justify-content: center; /* Changed to center for horizontal alignment */
        gap: 5px 8px; /* Vertical and horizontal gap for wrapped items */
        margin-top: 0;
        padding: 0;
        width: 100%; /* Take full width of its flex parent for wrapping */
    }
    .pcal-checkboxes-float-right label {
        width: auto; /* Allow label to shrink to content */
    }
    .pcal-checkboxes-float-right input[type="checkbox"] {
        margin-left: 0; /* Reset any default browser margin */
    }


    /* For `display: contents`, its children become grid items. */
    .pcal-time-entry.pcal-main-entry {
        display: contents !important; /* Added !important */
    }

    /* Apply grid-column directly, removed margin-right for inputs within time-entry */
    .pcal-time-entry.pcal-main-entry .pcal-label {
        grid-column: 1 / 2; /* Label in first column */
        text-align: left;
    }

    .pcal-time-entry.pcal-main-entry .pcal-start-h,
    .pcal-time-entry.pcal-main-entry .pcal-break-h {
        grid-column: 2 / 3; /* Hour input */
    }
    .pcal-time-entry.pcal-main-entry .pcal-colon {
        grid-column: 3 / 4; /* Colon */
        text-align: center;
    }
    .pcal-time-entry.pcal-main-entry .pcal-start-m,
    .pcal-time-entry.pcal-main-entry .pcal-break-m {
        grid-column: 4 / 5; /* Minute input */
    }
    .pcal-time-entry.pcal-main-entry select {
        grid-column: 5 / 6; /* AM/PM select */
    }

    /* More specific rule for hidden selects within time-entry on larger screens */
    .pcal-time-entry select.pcal-hidden {
        display: none !important;
    }

    /* Row placement for main time entries - shifted down by 1 row */
    .pcal-day > .pcal-time-entry:nth-of-type(1) { grid-row: 2; } /* Start Time */
    .pcal-day > .pcal-time-entry:nth-of-type(2) { grid-row: 3; } /* End Time */
    .pcal-day > .pcal-time-entry.pcal-break-time-entry { grid-row: 4; } /* Break Time */
}