/* Rosea Work Tracker - Frontend Polished Layout (Modernized) */

/* --- Base & Font --- */
body {
  background-color: #f3f4f6; /* Light gray background for the page */
}

.rlwt-frontend-wrapper {
  max-width: 700px; /* Slightly narrower for better focus */
  margin: 40px auto;
  background: #ffffff;
  padding: 0; /* Remove padding, let header/body handle */
  border-radius: 12px; /* Softer corners */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #1f2937; /* Darker gray text */
  overflow: hidden; /* Keep children contained */
  border: 1px solid #e5e7eb; /* Light border */
}

/* === Labor Entry Specific Wrapper Style === */
/* Use the same card style for consistency */
.rlwt-employee-labor-entry {
  max-width: 700px;
  margin: 40px auto;
  background: #ffffff;
  padding: 24px 28px; /* Add padding for non-header content */
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #1f2937;
  border: 1px solid #e5e7eb;
}
.rlwt-employee-labor-entry h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    margin-top: 0;
    margin-bottom: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}
.rlwt-employee-labor-entry p:first-of-type {
    margin-top: 0;
    color: #4b5563;
    margin-bottom: 1.5rem;
}
.rlwt-employee-labor-entry hr {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 1.5rem 0;
}
.rlwt-employee-labor-entry h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1rem;
    margin-top: 0;
}


/* --- BLUE HEADER STRIP --- */
.rlwt-frontend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  background: #3b82f6; /* Tailwind Blue 500 */
  color: #ffffff;
  padding: 16px 24px; /* Slightly reduced padding */
}
.rlwt-frontend-header .title {
  font-size: 1.125rem; /* 18px */
  font-weight: 600;
  color: #ffffff;
}

/* --- HEADER RIGHT-SIDE META --- */
.header-user-details {
  line-height: 1.4;
  text-align: right;
}
.header-user-details .user-name {
  font-weight: 500;
  font-size: 0.875rem; /* 14px */
}
.header-user-details .user-id {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.75rem; /* 12px */
  opacity: 0.8;
}
.header-date-text {
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin-left: 16px; /* Add space if it wraps */
}

/* --- FORM BODY (Work Log) --- */
.rlwt-frontend-header + .rlwt-work-form {
  padding: 24px 28px; /* Consistent padding */
  background: #fff;
}

/* --- FORM layout (Work Log & Labor Entry) --- */
.rlwt-work-form,
.rlwt-employee-labor-entry .rlwt-fe-form {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Consistent gap */
}

/* --- FORM GRID --- */
.rlwt-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px; /* Slightly reduced gap */
}
.rlwt-form-row.full-width { grid-template-columns: 1fr; }
.rlwt-form-row.three-col { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } /* For labor entry header */

/* Ensure divs take full width inside the form */
.rlwt-work-form > div,
.rlwt-employee-labor-entry .rlwt-fe-form > div {
  width: 100%;
}

/* --- LABELS --- */
.rlwt-work-form label,
.rlwt-employee-labor-entry .rlwt-fe-form label {
  display: block;
  font-weight: 500;
  font-size: 0.875rem; /* 14px */
  margin-bottom: 6px; /* Reduced margin */
  color: #374151; /* Gray 700 */
}

/* --- INPUTS, SELECTS, TEXTAREAS --- */
.rlwt-work-form input[type="text"],
.rlwt-work-form input[type="time"],
.rlwt-work-form input[type="date"],
.rlwt-work-form textarea,
.rlwt-work-form select,
.rlwt-employee-labor-entry input[type="text"],
.rlwt-employee-labor-entry input[type="time"],
.rlwt-employee-labor-entry input[type="date"],
.rlwt-employee-labor-entry input[type="number"], /* Added number */
.rlwt-employee-labor-entry textarea,
.rlwt-employee-labor-entry select {
  width: 100%;
  padding: 8px 12px; /* Slightly smaller padding */
  border: 1px solid #d1d5db; /* Gray 300 */
  border-radius: 6px; /* Standard radius */
  font-size: 0.875rem; /* 14px */
  color: #1f2937;
  background-color: #fff; /* White background */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}
.rlwt-employee-labor-entry input[type="number"] {
  padding-right: 6px; /* Adjust number input padding */
}


/* --- Focus State --- */
.rlwt-work-form input:focus,
.rlwt-work-form textarea:focus,
.rlwt-work-form select:focus,
.rlwt-employee-labor-entry input:focus,
.rlwt-employee-labor-entry textarea:focus,
.rlwt-employee-labor-entry select:focus {
  border-color: #3b82f6; /* Blue 500 */
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); /* Lighter blue ring */
  outline: none;
}

/* --- TEXTAREAS --- */
.rlwt-work-form textarea,
.rlwt-employee-labor-entry textarea {
  resize: vertical;
  min-height: 100px; /* Reduced height */
  line-height: 1.5;
}

/* --- Readonly Admin Note --- */
.rlwt-admin-note-display textarea[readonly] {
    background-color: #f3f4f6 !important; /* Lighter gray */
    color: #4b5563; /* Medium gray text */
    border-style: solid;
    cursor: not-allowed;
}


/* --- MANHOURS DISPLAY --- */
.manhours-display-group {
  display: flex;
  align-items: center;
  gap: 12px;
}
#rlwt-hours-display {
  background-color: #eff6ff; /* Blue 50 */
  color: #3b82f6; /* Blue 500 */
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1rem; /* 16px */
  min-width: 60px;
  text-align: center;
  border: 1px solid #dbeafe; /* Blue 200 */
}

/* --- BUTTONS --- */
.rlwt-submit,
.rlwt-employee-labor-entry .button-primary,
.rlwt-employee-labor-entry .button-secondary {
  display: inline-block;
  background: #3b82f6; /* Blue 500 */
  color: #fff;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.875rem; /* 14px */
  text-align: center;
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  text-decoration: none; /* For links styled as buttons */
}
.rlwt-employee-labor-entry .button-secondary {
  background: #fff;
  color: #374151; /* Gray 700 */
  border-color: #d1d5db; /* Gray 300 */
}
.rlwt-employee-labor-entry .button-secondary.small {
  padding: 4px 8px;
  font-size: 0.75rem; /* 12px */
}


.rlwt-submit:hover,
.rlwt-employee-labor-entry .button-primary:hover {
  background: #2563eb; /* Blue 600 */
}
.rlwt-employee-labor-entry .button-secondary:hover {
  background: #f9fafb; /* Gray 50 */
  border-color: #9ca3af; /* Gray 400 */
  color: #1f2937;
}

.rlwt-submit:focus,
.rlwt-employee-labor-entry button:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.rlwt-submit:active,
.rlwt-employee-labor-entry button:active {
  transform: translateY(1px);
}

/* Button Alignment */
.rlwt-work-form > div:has(.rlwt-submit) {
  text-align: right;
  margin-top: 8px;
}
.rlwt-employee-labor-entry .rlwt-fe-form > div:has(button) {
    display: flex; /* Helps align button if needed */
    justify-content: flex-start; /* Default align left */
}
.rlwt-employee-labor-entry > div:has(#rlwt-submit-all-attendance-btn) {
    text-align: right; /* Align submit button right */
}


/* --- HOLIDAY + ERROR STYLES --- */
.rlwt-holiday-msg, .rlwt-error-notice,
#rlwt-labor-attendance-notice { /* Include labor notice */
  padding: 10px 15px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.875rem;
  margin-bottom: 16px;
  border-width: 1px;
  border-style: solid;
}
.rlwt-holiday-msg {
  background: #fffbeb; /* Yellow 50 */
  border-color: #fde68a; /* Yellow 200 */
  color: #92400e; /* Yellow 800 */
}
.rlwt-error-notice,
#rlwt-labor-attendance-notice.error-notice {
  background: #fee2e2; /* Red 100 */
  border-color: #fecaca; /* Red 200 */
  color: #b91c1c; /* Red 700 */
}
#rlwt-labor-attendance-notice.success-notice { /* Style for success notice */
    background: #dcfce7; /* Green 100 */
    border-color: #bbf7d0; /* Green 200 */
    color: #166534; /* Green 700 */
}


/* --- Specific Labor Attendance Styles --- */
.laborer-input-group { position: relative; }
#rlwt-add-new-laborer-quick {
    position: absolute;
    right: 5px;
    top: 26px; /* Adjust based on label height + input padding */
}
#rlwt-labor-session-list table { /* Use admin table styles */
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    border: 1px solid #e5e7eb; /* Lighter border */
    font-size: 0.875rem;
}
#rlwt-labor-session-list th,
#rlwt-labor-session-list td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}
#rlwt-labor-session-list th {
    background-color: #f9fafb; /* Gray 50 */
    font-weight: 500;
    color: #374151; /* Gray 700 */
}
#rlwt-labor-session-list .no-entries-row td {
    text-align: center;
    color: #6b7280; /* Gray 500 */
    padding: 20px;
}
#rlwt-submit-all-attendance-btn:disabled {
    background-color: #d1d5db; /* Gray 300 */
    cursor: not-allowed;
    opacity: 0.7;
}


/* --- RESPONSIVE --- */
@media (max-width: 720px) {
  .rlwt-frontend-wrapper,
  .rlwt-employee-labor-entry {
    margin: 20px 10px;
    border-radius: 8px;
  }
  .rlwt-frontend-header + .rlwt-work-form,
  .rlwt-employee-labor-entry {
    padding: 20px;
  }
  .rlwt-form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .rlwt-work-form,
  .rlwt-employee-labor-entry .rlwt-fe-form { gap: 16px; }

  .rlwt-submit,
  .rlwt-employee-labor-entry .button-primary,
  .rlwt-employee-labor-entry .button-secondary {
    width: 100%;
    padding: 12px; /* Slightly larger padding on mobile */
  }
  .rlwt-work-form > div:has(.rlwt-submit),
  .rlwt-employee-labor-entry > div:has(#rlwt-submit-all-attendance-btn) {
    text-align: center;
  }
  .rlwt-frontend-header {
    padding: 12px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .header-user-details, .header-date-text {
      text-align: left;
      padding: 0;
      margin-left: 0;
  }
  .manhours-display-group label {
      flex-basis: 100%; /* Stack label on mobile */
      margin-bottom: 4px;
  }
}

/* === Employee Holiday List Styles (Reusing Card Style) === */
.rlwt-holiday-list-wrapper {
  max-width: 700px;
  margin: 40px auto;
  background: #ffffff;
  padding: 24px 28px;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #1f2937;
  border: 1px solid #e5e7eb;
}
.rlwt-holiday-list-wrapper h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin-top: 0;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e5e7eb;
}
.rlwt-holiday-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.rlwt-holiday-table th,
.rlwt-holiday-table td {
  padding: 10px 8px; /* Reduced padding */
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}
.rlwt-holiday-table th {
  font-weight: 500;
  color: #4b5563; /* Gray 600 */
}
.rlwt-holiday-table tbody tr:last-child td {
  border-bottom: none;
}
.office-holidays-table-container {
    overflow-x: auto; /* Allow horizontal scroll if needed */
}

@media (max-width: 600px) {
  .rlwt-holiday-list-wrapper {
      margin: 20px 10px;
      padding: 20px;
  }
  .rlwt-holiday-table th,
  .rlwt-holiday-table td {
      padding: 8px 6px;
      white-space: nowrap; /* Prevent wrapping on small screens */
  }
}
/* Fix for autocomplete suggestions appearing behind other content */
.ui-autocomplete {
    background-color: #ffffff !important; /* Force a white background */
    border: 1px solid #d1d5db !important;   /* Add a light border */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important; /* Add a shadow */
    border-radius: 6px !important;        /* Match your new style */
    z-index: 9999 !important;             /* Ensure it's on top */
    padding: 4px !important;              /* Add some internal padding */
    list-style: none !important;          /* Remove bullets */
    width: auto !important;               /* <-- This fixes the stretching */
    position: absolute !important;        /* Ensures proper positioning */
}

/* Style for the individual items inside the list */
.ui-autocomplete .ui-menu-item {
    padding: 6px 10px !important;
    cursor: pointer;
    border-radius: 4px !important;
    margin: 0 !important;
}

/* Style for the highlighted/hovered item */
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    background: #3b82f6 !important; /* Blue 500 (matches your new style) */
    color: #ffffff !important;
    border: none !important;
    margin: 0 !important;
}
/* Hide holiday, error, and labor notices */
.rlwt-holiday-msg, 
.rlwt-error-notice, 
#rlwt-labor-attendance-notice {
    display: none !important;
}
/* ------------------------------------------- */
/* --- Styles for Employee Labor Log Portal -- */
/* ------------------------------------------- */

/* Target the wrapper for this specific shortcode */
.rlwt-employee-labor-entry .rlwt-fe-form {
    padding: 0;
    box-shadow: none;
    border: none;
    background: transparent;
}

/* Use flexbox for the "Add Individual Entry" row */
.rlwt-employee-labor-entry #rlwt-labor-entry-form .form-row {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping on small mobile screens */
    gap: 12px;
    align-items: flex-end; /* Aligns all items to the bottom */
}

/* Make the laborer name field grow */
.rlwt-employee-labor-entry .form-row .laborer-input-group {
    flex: 1 1 180px; /* Grow to fill space, with a base of 180px */
    min-width: 150px;
}

/* Set specific sizes for the number fields */
.rlwt-employee-labor-entry .form-row .form-group[style*="flex-basis: 80px"] {
    flex: 0 1 80px; /* Don't grow, shrink if needed, base of 80px */
}

.rlwt-employee-labor-entry .form-row .form-group[style*="flex-basis: 100px"] {
    flex: 0 1 100px; /* Don't grow, shrink if needed, base of 100px */
}

/* Clean up labels and margins in that row */
.rlwt-employee-labor-entry .form-row .form-group {
    margin-bottom: 0;
}

.rlwt-employee-labor-entry .form-row .form-group label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
}

/* Align the "Add Entry" button */
.rlwt-employee-labor-entry .form-row .form-group:last-child {
    padding-bottom: 1px; /* Small adjustment to align with inputs */
}

/* --- Style the Staging Table --- */
.rlwt-employee-labor-entry #rlwt-labor-session-list .rlwt-admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.rlwt-employee-labor-entry #rlwt-labor-session-list .rlwt-admin-table th,
.rlwt-employee-labor-entry #rlwt-labor-session-list .rlwt-admin-table td {
    border: 1px solid #eee;
    padding: 10px 12px;
    text-align: left;
    font-size: 14px;
    vertical-align: middle;
}

.rlwt-employee-labor-entry #rlwt-labor-session-list .rlwt-admin-table th {
    background-color: #f9f9f9;
    font-weight: 600;
    font-size: 13px;
}

.rlwt-employee-labor-entry #rlwt-labor-session-list .rlwt-admin-table td:not(:first-child) {
    text-align: center;
}

.rlwt-employee-labor-entry #rlwt-labor-session-list .rlwt-admin-table .remove-labor-entry-btn {
    color: #d63638;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
}

/* --- Style the final Submit Button --- */
#rlwt-submit-all-attendance-btn {
    background-color: #0073aa; /* WordPress Blue */
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

#rlwt-submit-all-attendance-btn:hover {
    background-color: #005a87;
}

#rlwt-submit-all-attendance-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Style the "No entries" row */
.rlwt-employee-labor-entry #rlwt-labor-session-list .no-entries-row td {
    text-align: center;
    color: #777;
    font-style: italic;
    padding: 20px;
}