/* ───── Tailwind-like tokens ───── */
$gray-50 : #f8fafc;
$gray-100: #f1f5f9;
$gray-500: #64748b;
$gray-600: #475569;
$gray-700: #334155;
$blue-50 : #eff6ff;
$blue-100: #dbeafe;
$blue-600: #2563eb;
$radius-sm: .5rem;       //≈ rounded-lg
$radius-lg: 1rem;        //≈ rounded-2xl
$shadow   : 0 12px 28px -14px rgba(0,0,0,.18);
$shadow-h : 0 18px 42px -16px rgba(0,0,0,.24);
$dur      : .35s;
$ease     : cubic-bezier(.4,0,.2,1);

/* ───── Wrapper ───── */
.dashboard{
  max-width: 1500px;
  margin-inline: auto;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ───── KPI grid ───── */
.kpi-grid{
  display: grid;
  gap: 1rem;

  @media (min-width:640px){ grid-template-columns: repeat(2,1fr); }
  @media (min-width:768px){ grid-template-columns: repeat(3,1fr); }
  @media (min-width:1024px){ grid-template-columns: repeat(5,1fr); }
}

/* KPI card */
.kpi-card{
  display:flex; gap:1rem; align-items:center;
  padding:1.5rem;
  background:#fff; border-radius:$radius-lg;
  box-shadow:$shadow;
  transition:transform $dur $ease, box-shadow $dur $ease;

  &:hover{ transform:translateY(-4px); box-shadow:$shadow-h; }
}

.kpi-icon{
  width:3.5rem; height:3.5rem;
  display:flex; align-items:center; justify-content:center;
  border-radius:9999px; color:#fff;
}

.kpi-text{ text-align:right; flex:1; }
.kpi-label { font-size:.8rem; color:$gray-500; white-space:nowrap; }
.kpi-number{ font:700 1.5rem/1 'Inter',sans-serif; color:$gray-700; }
.kpi-rate  { font-size:.65rem; font-weight:600; }
.text-up   { color:#059669; }   /* emerald-600 */
.text-down { color:#b91c1c; }   /* red-700   */

/* ───── universal glass card ───── */
.glass-card{
  position:relative;
  padding:2rem;
  border-radius:$radius-lg;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(9px) saturate(160%);
  box-shadow:$shadow;
  transition:transform $dur $ease, box-shadow $dur $ease, background $dur;

  /* glow border */
  &::before{
    content:'';
    position:absolute; inset:0;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(140deg,#38bdf8,#818cf8 50%,#a855f7);
    mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask-composite:exclude;
    opacity:.45; pointer-events:none;
    transition:opacity $dur;
  }

  &:hover{
    transform:translateY(-6px);
    background:#fff; box-shadow:$shadow-h;

    &::before{ opacity:.9; }
  }
}

/* headings */
.section-head{ font-weight:600; color:$gray-600; margin-bottom:1rem; }
.mini-head   { font-weight:500; color:$gray-600; margin-bottom:.6rem; font-size:.9rem; }
.mini-cap    { margin-top:.75rem; font-size:.85rem; color:$gray-500; }

/* charts */
.chart-xl{ height:350px; width:100%; }
.mini-grid{
  display:grid; gap:1.5rem;
  @media (min-width:768px){ grid-template-columns:repeat(3,1fr); }
}
.mini-card{ @extend .glass-card; display:flex; flex-direction:column; align-items:center; }

/* ───── tables ───── */
.tbl-grid{
  display:grid; gap:1.5rem;
  @media (min-width:1024px){ grid-template-columns:repeat(2,1fr); }
}

.table-card{ @extend .glass-card; overflow-x:auto; }
.table-head{
  background:$gray-50;
  padding:.9rem 1.5rem;
  font-weight:600; color:$gray-600;
  border-bottom:1px solid #e2e8f0;
}

/* zebra & hover row */
table{ width:100%; font-size:.875rem;
  thead{ background:$gray-50; color:$gray-500; }

  tbody tr:nth-child(odd){ background:#fff; }
  tbody tr:nth-child(even){ background:$gray-100; }
  tbody tr:hover{ background:$blue-50; }
}

.text-emerald{
    color: #00ab66;
}
.text-sky{
    color: #87CEEB;
}
.text-amber{
    color: #FFBF00;
}
.text-redorange{
    color: #fa5422;
}