/* Caregiver Timesheet — Modern Redesign */

/* Theme & base */
:root{
  --blue: #0d6efd;
  --green: #198754;
  --red: #dc3545;
  --white: #fff;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  
  --primary: var(--blue);
  --danger: var(--red);
  --success: var(--green);
  --body-bg: var(--gray-100);
  --body-color: var(--gray-900);
  --border-color: var(--gray-300);
  --border-radius: 0.5rem; /* 8px */
  --box-shadow: 0 1px 3px 0 rgba(0,0,0,0.07), 0 1px 2px -1px rgba(0,0,0,0.07);
  --fs-base: 18px; /* Larger base font size for accessibility */
}

*{ box-sizing:border-box }
html,body{
  margin:0; padding:0; background:var(--body-bg); color:var(--body-color);
  font:var(--fs-base)/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:focus-visible{ outline:2px solid var(--primary); outline-offset:2px }

/* Page wrapper */
.wrap{
  max-width:1000px; margin:24px auto; padding:0 16px 80px;
}

/* Title */
h1{ font-size: 1.8rem; font-weight: 700; margin:0 0 24px }

/* Header grid in a card */
.hdr{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap: 16px; align-items:end; margin-bottom: 24px;
  background: var(--white);
  padding: 20px;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  box-shadow: var(--box-shadow);
}
.hdr > div{ min-width:0 }

/* Labels */
label{
  font-size: 0.9rem; color: var(--gray-700); font-weight: 600;
  display:block; margin:0 0 6px; text-transform:uppercase; letter-spacing:.04em;
}

/* Inputs */
input[type="text"], input[type="date"], input[type="time"], input[type="number"]{
  width:100%; padding: 12px 14px; border:1px solid var(--border-color); border-radius: var(--border-radius); 
  background:#fff; font-size: 1rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
input:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
input[type="number"]{ appearance:textfield }
/* Disabled inputs now have darker text and no opacity for better contrast */
input[disabled]{ background-color: var(--gray-200); color: var(--gray-700); }

/* Buttons */
.btn{ 
  appearance:none; border:1px solid transparent; padding:14px 20px; border-radius:var(--border-radius); 
  cursor:pointer; font-weight: 600; font-size: 1.05rem; text-align: center;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.1s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { cursor: not-allowed; opacity: 0.65; }

/* Brand button is now blue by default */
.btn.brand{ background:var(--primary); color:var(--white); }
.btn.brand:hover{ background-color: #0b5ed7; }

.btn.ghost{ background:var(--white); border-color:var(--border-color); color:var(--body-color); }
.btn.ghost:hover{ background-color: var(--gray-100); }
.btn.danger{ background:var(--danger); color:var(--white); }
.btn.danger:hover{ background-color: #bb2d3b; }
.btn.success{ background:var(--success); color:var(--white); }
.btn.success:hover{ background-color: #157347; }


.rowbtn{ 
  border:1px solid var(--border-color); background:#fff; border-radius:6px; padding:8px 12px; cursor:pointer;
  color: var(--danger);
  /* Text is now larger and bolder for better visibility */
  font-size: 1rem;
  font-weight: 600;
}
.rowbtn:hover{ background:var(--danger); color: var(--white); }

/* Toolbars */
.toolbar{ 
  display:grid; grid-template-columns:1fr; gap:12px; margin-top: 24px;
}
@media (min-width:720px){
  .toolbar{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
}

/* Add Row is now green */
#addRowBtn{ 
  min-width:280px; background-color: var(--success); color: var(--white); border-color: var(--success);
}
#addRowBtn:hover { background-color: #157347; }
@media (min-width:900px){
  #addRowBtn{ min-width:320px; padding:16px 24px; font-size:1.1rem }
}

/* Totals bar (outside scroll) */
.totals-bar{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px; margin:8px 0 16px;
  border-radius: var(--border-radius); background:var(--gray-800); color: var(--white);
  font-size: 1.1rem;
}
.totals-bar .right{ font-weight:700 }
.totals-bar .muted { color: #adb5bd; }

/* Table container */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Table */
table{
  width:100%; min-width:760px; /* Increased min-width for wider time columns */
  border-collapse:separate; border-spacing:0; table-layout:fixed;
  font-variant-numeric: tabular-nums;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  overflow: hidden; /* clips the corners of rows inside */
}

thead th{
  font-size:0.9rem; color:var(--gray-700); font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  text-align:left; padding:16px 12px;
  border-bottom: 2px solid var(--border-color);
  background-color: var(--gray-100);
  white-space: nowrap; /* Prevent header text from wrapping */
}
/* Add more left padding to the first 3 headers for better alignment */
thead th:nth-child(-n+3) {
  padding-left: 17px;
}

/* Set explicit column widths to prevent wrapping */
thead th:nth-child(1) { width: 160px; } /* Date */
thead th:nth-child(2),
thead th:nth-child(3) { width: 140px; } /* Time In/Out - Widened */
thead th:nth-child(4) { width: 100px; } /* Hours */
thead th:nth-child(5) { width: 120px; } /* Amount */
thead th:nth-child(6) { width: 100px; } /* Delete Button */

tbody tr:not(:last-child) { border-bottom: 1px solid var(--border-color); }
tbody td{ 
  padding:8px 12px;
  white-space: nowrap; /* Prevent cell content from wrapping */
}

tbody input{
  width:100%; min-width:0; margin:0; padding:8px;
  background:transparent; border:0; border-radius:0; font-size: 1rem;
  appearance:none; -webkit-appearance:none;
  display:block; box-sizing:border-box;
}
tbody input:focus { box-shadow: none; }

.right{ text-align:right }
td .earned, td .hours{
  display:block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

tfoot td{ 
  padding:16px 12px; font-weight:700; background-color: var(--gray-100); 
  border-top: 2px solid var(--border-color);
}
.muted{ color: var(--gray-700) }

.signature-blocks{ display:none }
.sig{ border-top:1px solid #111827; padding-top:8px }

/* Mobile tweaks */
@media (max-width:540px){
  .wrap { margin-top: 16px; padding: 0 12px 60px; }
  h1 { font-size: 1.6rem; }
  /* Instead of stacking, reduce padding/gap to keep 2-column layout on mobile */
  .hdr { padding: 12px; gap: 10px; }
  
  /* Force grid items to shrink below their content's intrinsic minimum size. */
  /* This prevents wide inputs (like type="date" on iOS) from breaking the layout. */
  .hdr > div {
    min-width: 0;
  }

  /* Apply uniform padding to all header inputs for visual consistency on mobile */
  .hdr input {
    padding: 12px 10px;
    min-width: 0; /* Add this to override iOS's stubborn default min-width on date inputs */
  }

  /* Mobile-only workaround: make date inputs look like plain text to hide layout bug */
  #startDate, #endDate {
    background-color: transparent;
    border: none;
    text-align: left !important; /* Force left alignment */
  }
}

/* Print */
@media print{
  .no-print{ display:none !important }
  html, body { 
    font-size: 9pt; /* Smaller base font for print */
    line-height: 1.2;
    background:#fff;
  }
  .wrap{ max-width:100%; padding:0; margin: 0; }
  h1 { font-size: 16pt; text-align: center; margin-bottom: 12px; }

  /* Condense header */
  .hdr { 
    box-shadow: none; border: 1px solid var(--border-color);
    padding: 8px; gap: 8px; font-size: 8pt; margin-bottom: 12px;
  }
  .hdr label { font-size: 8pt; margin-bottom: 2px; }
  .hdr input { padding: 4px; border-radius: 4px; }
  .totals-bar { display: none; }

  .table-wrap{ overflow:visible !important }
  table { 
    width: 100%;
    min-width: auto !important;
    table-layout: fixed !important; 
    box-shadow: none;
    border: 1px solid var(--border-color);
    border-radius: 0;
  }
  
  /* Condense table cells */
  thead th { font-size: 8pt; }
  thead th, tbody td, tfoot td {
    padding: 4px 6px;
  }
  tbody input { font-size: 9pt; padding: 2px 4px; }

  tfoot td { font-size: 9pt; }

  .signature-blocks{ 
    display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:24px;
    font-size: 9pt;
  }
  .sig{ border-top:1px solid #111827; padding-top:4px }
}