/* === สี / รัศมี / เงา === */
$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 20px 42px -18px rgba(0,0,0,.25);
$dur:.35s; $ease:cubic-bezier(.4,0,.2,1);

/* ---------- layout ---------- */
.report-wrap{max-width:1200px;margin:auto;padding:2rem 1rem;display:flex;flex-direction:column;gap:2.5rem}
.title-box{text-align:center}
.big-title{font:700 2rem/1.25 'Inter',sans-serif;color:$slate-600;span{color:$blue-600}}
.sub-title{font:600 1.4rem/1.25 'Inter',sans-serif;color:$blue-600;.emp-num{font-size:1.65rem}}

.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:$dur;
  &: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{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 60px auto;gap:.75rem;align-items:center;font-size:.9rem;
  @media(max-width:640px){grid-template-columns:110px 1fr 50px}}
.bar-label{font-weight:500;color:$slate-600;white-space:nowrap}
.bar-track{height:.55rem;background:$gray-100;border-radius:9999px;overflow:hidden;position:relative}
.bar-fill{height:100%;background:$blue-600;border-radius:inherit;transition:width .4s;&.blue{background:#3b82f6}&.indigo{background:#6366f1}}
.bar-val{font-weight:600;color:$slate-600}
.bar-date{font-size:.8rem;color:$slate-600;white-space:nowrap}

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

/* hover glow for cards */
.tbl-card:hover,.progress-card:hover{
  &::before{content:'';position:absolute;inset:0;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;pointer-events:none}
}
