/* =========================================================
   /assets/css/calculator-monthly.css
   Monthly Timesheet Calculator — US / EN
   LT-style desktop + compact mobile table
========================================================= */

/* =========================================================
   RESULT CARDS
========================================================= */

.month-result-cards{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:22px;
}

.month-result-card{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:14px;
}

.month-result-card strong{
  display:block;
  font-size:.85rem;
  color:#667085;
  margin-bottom:4px;
  line-height:1.25;
}

.month-result-card span{
  display:block;
  font-size:1.15rem;
  font-weight:700;
  color:#121127;
  line-height:1.2;
}

/* =========================================================
   QUICK ACTION BUTTONS
========================================================= */

#wtc-month .month-quick-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:10px;
}

#wtc-month .month-quick-actions button{
  width:auto;
}

#wtc-month .month-quick-actions .wtc-hint{
  flex:1 1 300px;
}

/* =========================================================
   BASE TABLE
========================================================= */

.month-table-wrap{
  margin-top:56px;
  overflow:visible;
}

.wtc-month-table{
  width:100%;
  table-layout:auto;
  border-collapse:separate;
  border-spacing:0 10px;
}

.wtc-month-table th,
.wtc-month-table td{
  vertical-align:middle;
  padding:8px;
}

.wtc-month-table thead th{
  font-weight:700;
  color:#121127;
  border-bottom:1px solid #e5e7eb;
  white-space:nowrap;
}

.month-day-cell{
  width:auto;
}

.month-day-head{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  flex-wrap:nowrap;
}

.month-day-title{
  font-weight:700;
  font-size:1rem;
  line-height:1.2;
  color:#121127;
  white-space:nowrap;
}

.month-day-type{
  width:150px;
  min-width:150px;
  border:1px solid #dfe3ea;
  border-radius:999px;
  background:#fff;
  padding:6px 30px 6px 12px;
  font-weight:700;
  font-size:.85rem;
  color:#121127;
}

.month-day-type:disabled{
  opacity:.75;
}

.month-field-label{
  display:none;
}

.wtc-input.is-readonly{
  background:#eef5ff;
}

.wtc-input.is-disabled{
  opacity:.55;
  background:#f3f4f6;
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* =========================================================
   DESKTOP / TABLET — LT-style table
   Left day column wide, right columns compact
========================================================= */

@media (min-width:1200px){
#wtc-month .wtc-month-table thead th:first-child,
#wtc-month .wtc-month-table tbody th:first-child{
  width:auto;
  min-width:420px;
  text-align:left;
}

#wtc-month .wtc-month-table thead th:nth-child(2),
#wtc-month .wtc-month-table tbody td:nth-child(2){
  width:95px;
  min-width:95px;
}

#wtc-month .wtc-month-table thead th:nth-child(3),
#wtc-month .wtc-month-table tbody td:nth-child(3){
  width:95px;
  min-width:95px;
}

#wtc-month .wtc-month-table thead th:nth-child(4),
#wtc-month .wtc-month-table tbody td:nth-child(4){
  width:115px;
  min-width:115px;
}

#wtc-month .wtc-month-table thead th:nth-child(5),
#wtc-month .wtc-month-table tbody td:nth-child(5){
  width:130px;
  min-width:130px;
}

#wtc-month .wtc-month-table thead th:nth-child(6),
#wtc-month .wtc-month-table tbody td:nth-child(6){
  width:150px;
  min-width:150px;
}

#wtc-month .month-day-cell{
  width:auto;
  min-width:420px;
}

  #wtc-month .wtc-month-table tbody tr.is-weekend > th,
  #wtc-month .wtc-month-table tbody tr.is-weekend > td,
  #wtc-month .wtc-month-table tbody tr.is-nonwork > th,
  #wtc-month .wtc-month-table tbody tr.is-nonwork > td{
    background:#f3f4f6 !important;
  }

  #wtc-month .wtc-month-table tbody tr.is-weekend > th:first-child,
  #wtc-month .wtc-month-table tbody tr.is-nonwork > th:first-child{
    border-top-left-radius:8px;
    border-bottom-left-radius:8px;
  }

  #wtc-month .wtc-month-table tbody tr.is-weekend > td:last-child,
  #wtc-month .wtc-month-table tbody tr.is-nonwork > td:last-child{
    border-top-right-radius:8px;
    border-bottom-right-radius:8px;
  }

}

/* =========================================================
   MOBILE — compact LT-style table
========================================================= */

@media (max-width:1199.98px){

  /* Quick buttons: 2 x 2 */
  #wtc-month .month-quick-actions,
  #wtc-month .wtc-field > .wtc-inline-3:last-child{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    align-items:stretch!important;
    margin-top:10px!important;
  }

  #wtc-month .month-quick-actions button,
  #wtc-month .wtc-field > .wtc-inline-3:last-child button{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:54px!important;
    border-radius:16px!important;
    padding:10px 8px!important;
    font-size:.95rem!important;
    line-height:1.1!important;
    white-space:normal!important;
    text-align:center!important;
  }

  #wtc-month .month-quick-actions .wtc-hint,
  #wtc-month .wtc-field > .wtc-inline-3:last-child .wtc-hint{
    grid-column:1 / -1!important;
  }

  /* Result cards: 2 x 2 */
  #wtc-month .month-result-cards{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
    margin-top:22px!important;
  }

  #wtc-month .month-result-card{
    min-width:0!important;
    width:100%!important;
    padding:16px 14px!important;
    border-radius:18px!important;
  }

  #wtc-month .month-result-card strong{
    font-size:.86rem!important;
    line-height:1.25!important;
    margin-bottom:8px!important;
  }

  #wtc-month .month-result-card span{
    display:block!important;
    font-size:1.15rem!important;
    line-height:1.2!important;
    font-weight:800!important;
    white-space:normal!important;
  }

  #wtc-month .month-table-wrap{
    width:100%;
    overflow:visible!important;
    margin-top:34px;
  }

  #wtc-month .wtc-month-table,
  #wtc-month .wtc-month-table thead,
  #wtc-month .wtc-month-table tbody{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    table-layout:auto!important;
    border-collapse:separate!important;
    border-spacing:0!important;
  }

  #wtc-month .wtc-month-table thead tr,
  #wtc-month .wtc-month-table tbody tr{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  /* Header: DAY + rotated column names */
  #wtc-month .wtc-month-table thead tr{
    display:grid!important;
    grid-template-columns:35% 14% 14% 14% 14% 15%!important;
    gap:0!important;
    align-items:end!important;
    height:118px!important;
    border-bottom:1px solid #e5e7eb!important;
  }

  #wtc-month .wtc-month-table thead th{
    display:block!important;
    position:relative!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:118px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    overflow:visible!important;
    white-space:nowrap!important;
    font-size:0!important;
    text-align:left!important;
  }

  #wtc-month .wtc-month-table thead th:first-child{
    font-size:.8rem!important;
    font-weight:800!important;
    text-transform:uppercase!important;
    align-self:end!important;
    height:auto!important;
    padding-bottom:10px!important;
  }

  #wtc-month .wtc-month-table thead th:not(:first-child)::after{
    position:absolute!important;
    left:0!important;
    bottom:10px!important;
    display:inline-block!important;
    transform:rotate(-68deg)!important;
    transform-origin:left bottom!important;
    font-size:.78rem!important;
    font-weight:800!important;
    line-height:1.05!important;
    color:#121127!important;
    white-space:nowrap!important;
  }

  #wtc-month .wtc-month-table thead th:nth-child(2)::after{content:"Start";}
  #wtc-month .wtc-month-table thead th:nth-child(3)::after{content:"End";}
  #wtc-month .wtc-month-table thead th:nth-child(4)::after{content:"Break (min.)";}
  #wtc-month .wtc-month-table thead th:nth-child(5)::after{content:"Overnight (min.)";}
  #wtc-month .wtc-month-table thead th:nth-child(6)::after{content:"Daily total";}

  /* Body rows */
  #wtc-month .wtc-month-table tbody tr{
    display:grid!important;
    grid-template-columns:29% 14% 14% 14% 14% 15%!important;
    gap:0!important;
    align-items:center!important;
    padding:4px 0!important;
    background:#fff!important;
  }

  #wtc-month .wtc-month-table tbody tr.is-weekend,
  #wtc-month .wtc-month-table tbody tr.is-nonwork{
    background:#f3f4f6!important;
    border-radius:8px!important;
  }

  #wtc-month .wtc-month-table tbody th,
  #wtc-month .wtc-month-table tbody td{
    display:block!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    padding:2px!important;
    margin:0!important;
    background:transparent!important;
    position:static!important;
    overflow:visible!important;
  }

  #wtc-month .wtc-month-table tbody th{
    grid-column:1!important;
  }

  #wtc-month .wtc-month-table tbody td:nth-child(2){grid-column:2!important;}
  #wtc-month .wtc-month-table tbody td:nth-child(3){grid-column:3!important;}
  #wtc-month .wtc-month-table tbody td:nth-child(4){grid-column:4!important;}
  #wtc-month .wtc-month-table tbody td:nth-child(5){grid-column:5!important;}
  #wtc-month .wtc-month-table tbody td:nth-child(6){grid-column:6!important;}

  #wtc-month .month-day-cell{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
  }

  #wtc-month .month-day-head{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    gap:4px!important;
    width:100%!important;
    min-width:0!important;
  }

  #wtc-month .month-day-title{
    font-size:1rem!important;
    line-height:1.1!important;
    font-weight:800!important;
    color:#121127!important;
    white-space:normal!important;
    overflow:visible!important;
  }

  #wtc-month .month-day-type{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:29px!important;
    border-radius:999px!important;
    padding:3px 20px 3px 8px!important;
    font-size:.7rem!important;
    font-weight:800!important;
    background:#fff!important;
  }

  #wtc-month .wtc-month-table .wtc-input{
    box-sizing:border-box!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:38px!important;
    border-radius:14px!important;
    padding:3px 2px!important;
    font-size:.8rem!important;
    text-align:center!important;
  }

  #wtc-month .wtc-month-table input[type="time"],
  #wtc-month .wtc-month-table .wtc-input.is-time{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    -webkit-appearance:none!important;
    appearance:none!important;
  }

  #wtc-month .wtc-month-table .m-break{
    font-size:.95rem!important;
  }

  #wtc-month .wtc-month-table .m-night{
    background:#e5e7eb!important;
    color:#111827!important;
    font-size:.7rem!important;
  }

  #wtc-month .wtc-month-table .m-total{
    background:#eaf2ff!important;
    color:#111827!important;
    font-size:.68rem!important;
    font-weight:700!important;
  }
}