/* ---------- palette & misc ---------- */
$blue-50 : #eff6ff;
$blue-600: #2563eb;
$radius  : 1rem;
$shadow  : 0 14px 30px -18px rgba(0,0,0,.18);
$shadow-h: 0 20px 44px -20px rgba(0,0,0,.26);

/* ---------- headline ---------- */
.page-title{
  text-align:center;
  font:700 1.9rem/1.3 'Inter',sans-serif;
  color:$blue-600; margin-bottom:1.6rem;
}

/* ---------- 2-col grid ---------- */
.card-grid{
  display:grid; gap:1.25rem;
  @media(min-width:768px){ grid-template-columns:360px 1fr }
}

/* ---------- glass card wrapper ---------- */
.glass{
  position:relative; background:rgba(255,255,255,.6);
  backdrop-filter:blur(10px) saturate(165%);
  border-radius:$radius; box-shadow:$shadow; transition:.4s;

  &:hover{
    transform:translateY(-6px);
    box-shadow:$shadow-h; background:#fff;
  }
  &::before{
    content:''; position:absolute; inset:0; pointer-events:none;
    border-radius:inherit; padding:1px;
    background:linear-gradient(140deg,#3b82f6,#818cf8 50%,#a855f7);
    mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask-composite:exclude; opacity:.45; transition:.35s;
  }
  &:hover::before{ opacity:.9; }
}

/* ---------- chart ---------- */
.chart-card{padding:1.5rem}
.chart{height:300px;width:100%}

/* ---------- table ---------- */
.table-card{padding:1rem 1.2rem;overflow:auto}
.grade-table{border-collapse:collapse;width:100%;font-size:.75rem;text-align:center}
th,td{padding:.35rem .4rem}
thead{background:$blue-600;color:#fff;font-weight:600}
tbody tr:nth-child(even){background:$blue-50}
.grand{background:#d1d5db;font-weight:700}
.sticky-col{position:sticky;left:0;background:inherit;font-weight:600;text-align:left;padding-left:.6rem}

/* scroll bar subtle */
.table-card::-webkit-scrollbar{height:.5rem}
.table-card::-webkit-scrollbar-thumb{background:#c4c4c4;border-radius:9999px}
