/* time‑tracker.css
   ——————————————
   Responsive Hours‑Worked & PTO grids
   Mobile → Tablet → Desktop
*/

/*─────────────────────────────────────────────────
  1) Container & Base Table Styles
─────────────────────────────────────────────────*/
#tt-container {
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
  overflow-x: auto;
}

.tt-table-wrapper {
  width: 90%;
  max-width: 900px;
  margin: 2rem auto;
  overflow-x: auto;
  box-sizing: border-box;
}

.tt-table-wrapper table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: #fff;
}

.tt-table-wrapper th,
.tt-table-wrapper td {
  border: 1px solid #ddd !important;
  padding: 0.75rem !important;
  vertical-align: middle;
}

.tt-table-wrapper th {
  background: #f5f5f5 !important;
  font-weight: 600 !important;
  text-align: left !important;
}

.tt-table-wrapper tbody tr:nth-child(even) {
  background: #fafafa !important;
}

/*─────────────────────────────────────────────────
  2) Mobile‑First (under 768px): Cards
─────────────────────────────────────────────────*/
@media (max-width: 767px) {
  .tt-table-wrapper table thead,
  .tt-table-wrapper table tfoot {
    display: none !important;
  }
  .tt-table-wrapper tbody tr {
    display: block !important;
    border: 1px solid #ddd !important;
    margin-bottom: 1rem !important;
    padding: 1rem !important;
  }
  .tt-table-wrapper tbody td {
    display: flex !important;
    justify-content: space-between !important;
    padding: 0.5rem 0 !important;
  }
  .tt-table-wrapper tbody td:before {
    content: attr(data-label) ": " !important;
    font-weight: bold !important;
    margin-right: 0.5rem !important;
  }
}

/*─────────────────────────────────────────────────
  3) Tablet (768px–1023px): Two‑Column Cards
─────────────────────────────────────────────────*/
@media (min-width: 768px) and (max-width: 1023px) {
  .tt-table-wrapper tbody tr {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-gap: 1rem !important;
    border: 1px solid #ddd !important;
    margin-bottom: 1rem !important;
    padding: 1rem !important;
  }
  .tt-table-wrapper tbody td {
    display: flex !important;
    justify-content: space-between !important;
    padding: 0.5rem 0 !important;
  }
  .tt-table-wrapper tbody td:before {
    content: attr(data-label) ": " !important;
    font-weight: bold !important;
  }
}

/*─────────────────────────────────────────────────
  4) Desktop (1024px and up): Full Tables
─────────────────────────────────────────────────*/
@media (min-width: 1024px) {
  /* Show header & footer in proper positions */
  .tt-table-wrapper table thead {
    display: table-header-group !important;
  }
  .tt-table-wrapper table tfoot {
    display: table-footer-group !important;
  }
  .tt-table-wrapper tbody tr {
    display: table-row !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .tt-table-wrapper tbody td {
    display: table-cell !important;
    padding: 0.75rem !important;
  }
  /* PTO select sizing */
  #pto-grid.widefat select {
    width: 5rem !important;
    font-size: 1.5rem !important;
    padding: 0.25rem !important;
  }
}
/* In your child theme’s style.css */

.fullwidth-timesheet {
  width: 100%;
  max-width: 750px;;  /* override any theme constraints */
  margin: 0 auto;
  padding: 4rem;
}

.fullwidth-timesheet .entry-content {
  max-width: none;
}