.top-fields{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:20px;
  margin-bottom:30px;
}

.field label{
  display:block;
  margin-bottom:10px;
}

.table-wrapper{
  overflow-x:auto;
}

table{
  width:100%;

  border-collapse:collapse;
}

th{
  background:#007f5f;
  color:#fff;
  padding:10px;
}

td{
  padding:5px;
  text-align:center;
  border-bottom:1px solid #e7efec;
}

tr:hover{
  background:#F2F7F6;
}

.time-input,
.break-input{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:2px solid #dce8e5;
  outline:none;
  transition:0.3s;
}

.time-input:focus,
.break-input:focus{
  border-color:#55a630;
}

.hours-box{
  background:#E6F0EE;
  padding:5px;
  border-radius:12px;
  color:#007f5f;
  font-weight:600;
}

.summary{
  margin-top:30px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:20px;
}

.card{
  background:linear-gradient(135deg,#007f5f,#365951);
  color:#fff;
  padding:25px;
  border-radius:24px;
  box-shadow:0 10px 25px rgba(0,127,95,0.15);
}

.card-label{
  opacity:0.9;
  margin-bottom:10px;
}

.card-value{
  font-size:1.5rem;
  font-weight:600;
}

.controls{
  margin-top:30px;
  display:flex;
  gap:15px;
  flex-wrap:wrap;
}

button{
  border:none;
  padding:16px 26px;
  border-radius:14px;
  cursor:pointer;
  font-weight:500;
  transition:0.3s;
}

button:hover{
  transform:translateY(-2px);
}

.sample-btn{
  background:#55a630;
  color:#fff;
}

.clear-btn{
  background:#192c27;
  color:#fff;
}

.pdf-btn{
  background:#007f5f;
  color:#fff;
}

.footer{
  margin-top:25px;
  text-align:center;
  color:#365951;
  font-size:0.92rem;
}