/* ─── สี & ระยะ ─── */
$blue-50:#eff6ff; $blue-600:#2563eb; $slate-600:#475569; $gray-100:#f1f5f9;
$radius:.75rem; $shadow:0 14px 28px -16px rgba(0,0,0,.16);
$shadow-h:0 18px 42px -16px rgba(0,0,0,.24);

/* ─── Wrapper ─── */
.report-wrap{
  max-width: 1200px;
  margin-inline:auto;
  padding-inline:1rem;
  display:flex; flex-direction:column; gap:2.5rem;
}

/* ─── Headings ─── */
.title-box{ text-align:center; }
.big-title{
  font:700 1.9rem/1.25 'Inter',sans-serif; color:$slate-600;
  span{ color:$blue-600; }
}
.sub-title{ font:600 1.35rem/1.3 'Inter',sans-serif; color:$blue-600;
  .emp-num{ font-size:1.6rem; }
}

/* ─── Tables ─── */
.grid-table{
  display:grid; gap:1.5rem;
  @media(min-width:768px){ grid-template-columns:repeat(3,1fr); }
}
.tbl-card{
  background:#fff; border-radius:$radius; box-shadow:$shadow; overflow:hidden;
  transition:.35s;
  &:hover{ transform:translateY(-5px); box-shadow:$shadow-h; }
}
.tbl-head{
  background:$blue-600; color:#fff; font-weight:600;
  padding:.75rem 1rem; text-align:center;
}
table{ width:100%; font-size:.9rem; text-align:center;
  th,td{ padding:.6rem .5rem; }
  tbody tr:nth-child(even){ background:$blue-50; }
}

/* ─── Progress card ─── */
.progress-card{
  background:#fff; border-radius:$radius; box-shadow:$shadow;
  padding:1.5rem; display:flex; flex-direction:column; gap:1rem;
}
.bar-row{
  display:grid; grid-template-columns:140px 1fr 50px auto; gap:.75rem; align-items:center;
  font-size:.9rem;
  @media(max-width:640px){ grid-template-columns:100px 1fr 45px; row-gap:.4rem; }
}

/* bar visual */
.bar-track{
  height:.55rem; background:$gray-100; border-radius:9999px; overflow:hidden;
  .bar-fill{
    height:100%; background:$blue-600; border-radius:inherit; transition:width .4s;
    &.blue{ background:#3b82f6; } &.indigo{ background:#6366f1; }
  }
}
.bar-label{ color:$slate-600; font-weight:500; white-space:nowrap; }
.bar-val  { font-weight:600; color:$slate-600; }
.bar-date { color:$slate-600; font-size:.8rem; white-space:nowrap; }

/* ─── Note ─── */
.note{
  text-align:right; font-weight:500; color:$slate-600;
}

/* ─── Hover glow (card) ─── */
.tbl-card:hover,
.progress-card:hover{
  &::before{
    content:''; position:absolute; inset:0; pointer-events:none;
    border-radius:inherit; padding:1px;
    background:linear-gradient(135deg,#3b82f6,#818cf8 60%,#a855f7);
    mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask-composite:exclude; opacity:.5;
  }
}
