/* Wrapper & Card */
.ttb-whpc-wrap{display:flex;justify-content:center;align-items:flex-start;padding:24px;box-sizing:border-box;}
.ttb-whpc-card{width:100%;max-width:960px;background:#fff;border:1px solid #e6e6e6;border-radius:16px;padding:24px;box-shadow:0 8px 24px rgba(0,0,0,0.06);box-sizing:border-box;}
.ttb-whpc-title{margin:0 0 8px;text-align:center;font-size:28px;line-height:1.2;}
.ttb-whpc-sub{margin:0 0 4px;text-align:center;color:#666;}

.ttb-whpc-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.ttb-whpc-section{background:#fafafa;border:1px solid #eee;border-radius:12px;padding:16px;}
.ttb-whpc-h3{margin:0 0 12px;font-size:20px;}
.ttb-whpc-note{margin:8px 0;color:#666;font-size:13px; text-align: center;}

/* Table */
.ttb-whpc-table{display:grid;grid-template-columns:120px 1fr 1fr 1fr 1fr 1fr;gap:8px;align-items:center;}
.ttb-whpc-row{display:contents;}
.ttb-whpc-head>div{font-weight:700;color:#555;}
.ttb-whpc-day{font-weight:700;}
.ttb-whpc-table input{width:100%;box-sizing:border-box;border:1px solid #d9d9d9;border-radius:10px;padding:8px 10px;font-size:14px;outline:none;}
.ttb-whpc-table input:focus{border-color:#9fd3ff;box-shadow:0 0 0 3px rgba(0,136,255,.15);}
.ttb-whpc-manual-ot{display:none;} /* shown only when manual mode selected */

/* Form right side */
.ttb-whpc-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.ttb-whpc-form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px;}
.ttb-whpc-form input[type="number"]{border:1px solid #d9d9d9;border-radius:10px;padding:8px 10px;font-size:14px;outline:none;}
.ttb-whpc-form input[type="number"]:focus{border-color:#9fd3ff;box-shadow:0 0 0 3px rgba(0,136,255,.15);}

.ttb-whpc-ot-mode{grid-column:1/-1;border:1px solid #e6e6e6;border-radius:10px;padding:10px;display:flex;gap:16px;flex-wrap:wrap;}
.ttb-whpc-ot-mode legend{font-weight:700;padding:0 6px;}
.ttb-whpc-ot-config{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;border:1px dashed #e0e0e0;border-radius:10px;padding:10px;background:#fff;}

.ttb-whpc-ded{grid-column:1/-1;display:flex;align-items:center;gap:10px;}
#ttb-whpc-deduction{width:240px;}

/* Actions */
.ttb-whpc-actions{display:flex;justify-content:center;gap:12px;margin-top:12px;}
.ttb-whpc-btn{cursor:pointer;border:none;border-radius:999px;padding:10px 16px;font-weight:700;background:linear-gradient(180deg,#64b5f6,#1e88e5);color:#fff;box-shadow:0 6px 14px rgba(30,136,229,.25);}
.ttb-whpc-btn.ghost{background:#eef5ff;color:#1e88e5;box-shadow:none;border:1px solid #cfe2ff;}

/* Results */
.ttb-whpc-output{margin-top:18px;}
.ttb-whpc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.ttb-whpc-stat{background:#fff;border:1px solid #eee;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px;align-items:center;}
.ttb-whpc-stat span{color:#666;}
.ttb-whpc-stat strong{font-size:20px;}

/* Responsive */
@media(max-width:900px){.ttb-whpc-grid{grid-template-columns:1fr;}}
@media(max-width:720px){
  .ttb-whpc-table{grid-template-columns:90px 1fr 1fr 1fr 1fr 1fr;}
  .ttb-whpc-stats{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:460px){
  .ttb-whpc-table{grid-template-columns:70px 1fr 1fr 1fr 1fr 1fr;}
  .ttb-whpc-stats{grid-template-columns:1fr;}
}

#ttb-whpc .ttb-whpc-grid {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 20px;
}

#ttb-whpc .ttb-whpc-section { width: 100%; }
#ttb-whpc .ttb-whpc-table { max-width: 100%; overflow-x: auto; }

#ttb-whpc .ttb-whpc-ot-settings {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

/* --- FIX: solid row layout for Section 1 --- */
#ttb-whpc .ttb-whpc-table { 
  display: block; /* no parent grid */
}

#ttb-whpc .ttb-whpc-row {
  display: grid !important;
  grid-template-columns: 100px 1fr 1fr 110px 1fr 1fr; /* Day | Start | End | Break | Total | Manual OT */
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

#ttb-whpc .ttb-whpc-head {
  font-weight: 700;
  color: #555;
}
#ttb-whpc .ttb-whpc-head > div {
  padding-bottom: 6px;
  border-bottom: 1px solid #eee;
}

#ttb-whpc .ttb-whpc-day { 
  font-weight: 700; 
  white-space: nowrap; 
}

#ttb-whpc .ttb-whpc-table input { 
  width: 100%; 
}

/* Manual OT column still toggles cleanly */
#ttb-whpc .ttb-whpc-manual-ot { display: none; } /* shown when Manual mode selected */

/* --- Responsive: keep it readable on narrow screens --- */
@media (max-width: 700px) {
  #ttb-whpc .ttb-whpc-row {
    grid-template-columns: 90px 1fr 1fr; /* Day | Start | End */
  }
  /* Break (min) -> column 2, Total Hours -> column 3, Manual OT -> full width below */
  #ttb-whpc .ttb-whpc-row > :nth-child(4) { grid-column: 2 / 3; }
  #ttb-whpc .ttb-whpc-row > :nth-child(5) { grid-column: 3 / 4; }
  #ttb-whpc .ttb-whpc-row > :nth-child(6) { grid-column: 1 / -1; }
}

/* Make sure native time picker indicator is visible/clickable */
#ttb-whpc input[type="time"] {
  -webkit-appearance: auto;
  appearance: auto;
  padding-right: 28px; /* room for the indicator */
}

#ttb-whpc input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 1;
  display: block;
  margin: 0;
  padding: 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* ---- Time Picker Polyfill styles ---- */
.ttb-timepicker{
  position:absolute;
  z-index:99999;
}
.ttb-timepicker-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  padding:12px;
  font-family:inherit;
}
.ttb-timepicker-fields{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.ttb-timepicker-fields label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:#555;
}
.ttb-timepicker select{
  border:1px solid #d1d5db;
  border-radius:8px;
  padding:6px 8px;
  font-size:14px;
  background:#fff;
}
.ttb-timepicker .tp-colon{
  font-weight:700;
  color:#555;
}
.ttb-timepicker-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
.ttb-timepicker-actions .tp-set,
.ttb-timepicker-actions .tp-cancel{
  cursor:pointer;
  border:none;
  border-radius:999px;
  padding:8px 14px;
  font-weight:700;
}
.ttb-timepicker-actions .tp-set{
  background:linear-gradient(180deg,#64b5f6,#1e88e5);
  color:#fff;
}
.ttb-timepicker-actions .tp-cancel{
  background:#eef2f7;
  color:#111827;
}

.ttb-timepicker{ position:absolute; z-index:2147483647; }

/* --- Lock Section 1 column widths & keep rows aligned --- */
#ttb-whpc .ttb-whpc-table { 
  display: block !important; 
  max-width: 100%;
  overflow-x: auto;
}

/* Define consistent column sizes (adjust if you like) */
#ttb-whpc {
  --whpc-col-day: 50px;      /* Day */
  --whpc-col-time: 140px;    /* Start / End */
  --whpc-col-break: 120px;   /* Break (min) */
  --whpc-col-total: 150px;   /* Total Hours */
  --whpc-col-manual: 150px;  /* Manual OT (hrs) */
}

/* Make BOTH header and data rows use the same grid */
#ttb-whpc .ttb-whpc-head,
#ttb-whpc .ttb-whpc-row {
  display: grid !important;
  grid-template-columns:
  var(--whpc-col-day)
  minmax(120px, 1fr)
  minmax(120px, 1fr)
  minmax(60px, 1fr)
  minmax(100px, 1fr)
  minmax(100px, 1fr);
  gap: 8px;
  align-items: center;
}

/* Header styling */
#ttb-whpc .ttb-whpc-head > div {
  font-weight: 700;
  color: #555;
  padding-bottom: 6px;
  border-bottom: 1px solid #eee;
}

/* Prevent content from forcing columns wider */
#ttb-whpc .ttb-whpc-row > div,
#ttb-whpc .ttb-whpc-head > div {
  min-width: 0;     /* allows children to shrink */
  overflow: hidden; /* avoid spillover */
}

/* Inputs shrink nicely and don’t grow rows */
#ttb-whpc .ttb-whpc-table input {
  width: 100%;
  min-width: 0;     /* critical for grid children */
  box-sizing: border-box;
}

/* Keep “Day” compact and on one line */
#ttb-whpc .ttb-whpc-day { 
  white-space: nowrap;
  font-weight: 700;
}

/* Optional: tighten number inputs to avoid spinner jitter on Firefox */
#ttb-whpc input[type="number"] {
  -moz-appearance: textfield;
}
#ttb-whpc input[type="number"]::-webkit-outer-spin-button,
#ttb-whpc input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Responsive collapse (two lines) */
@media (max-width: 700px) {
  #ttb-whpc .ttb-whpc-head,
  #ttb-whpc .ttb-whpc-row {
    grid-template-columns: 90px 1fr 1fr; /* Day | Start | End */
  }
  /* place Break/Total on same row, Manual OT full width below */
  #ttb-whpc .ttb-whpc-row > :nth-child(4) { grid-column: 2 / 3; } /* Break */
  #ttb-whpc .ttb-whpc-row > :nth-child(5) { grid-column: 3 / 4; } /* Total */
  #ttb-whpc .ttb-whpc-row > :nth-child(6) { grid-column: 1 / -1; } /* Manual OT */
  /* Match header columns too (use short labels if needed) */
  #ttb-whpc .ttb-whpc-head > :nth-child(4),
  #ttb-whpc .ttb-whpc-head > :nth-child(5),
  #ttb-whpc .ttb-whpc-head > :nth-child(6) { display: none; }
}