:root{
  --bg:#f6f8ff;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;
  --primary:#2563eb;
  --primary2:#1d4ed8;
  --success:#16a34a;
  --danger:#dc2626;
  --shadow:0 12px 28px rgba(2,6,23,.08);
  --radius:18px;
  --maxW:980px;
}

/* ===== base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(circle at top, #eef2ff 0, var(--bg) 45%, #ffffff 100%);
  color:var(--text);
}

a{color:inherit;text-decoration:none}
.container{max-width:var(--maxW); margin:0 auto; padding:22px}

/* canvas (Chart.js) */
canvas{width:100% !important; max-width:100%;}

/* ===== topbar ===== */
.topbar{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(180%) blur(10px);
  background:rgba(246,248,255,.72);
  border-bottom:1px solid rgba(229,231,235,.9);
}
.topbar .inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  padding:14px 22px;
  max-width:var(--maxW);
  margin:0 auto;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.2px}
.logo{
  width:36px;height:36px;border-radius:12px;
  background:linear-gradient(135deg,var(--primary),#60a5fa);
  box-shadow:0 10px 20px rgba(37,99,235,.25);
}
.badge{
  font-size:12px; padding:6px 10px; border-radius:999px;
  background:#eef2ff; border:1px solid #dbeafe; color:#1e3a8a;
}

/* ===== nav ===== */
.nav{display:flex; gap:8px; flex-wrap:wrap}
.nav a{
  padding:10px 12px; border-radius:12px;
  border:1px solid transparent;
  color:var(--muted); font-weight:700; font-size:14px;
}
.nav a.active{
  background:var(--card);
  border-color:var(--border);
  color:var(--text);
  box-shadow:0 10px 20px rgba(2,6,23,.06);
}

/* ===== headings ===== */
.h1{font-size:22px;font-weight:900;margin:18px 0 4px}
.sub{color:var(--muted);margin:0 0 18px;line-height:1.6}

/* ===== grids ===== */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width: 900px) {
  .grid3 { grid-template-columns: 1fr; }
  .grid2 { grid-template-columns: 1fr; }
}

/* ===== cards ===== */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  min-width:0;
}
.kpi .label{color:var(--muted);font-weight:700;font-size:13px}
.kpi .val{font-size:28px;font-weight:950;margin-top:8px;letter-spacing:.3px}
.kpi .hint{font-size:12px;color:var(--muted);margin-top:6px}

/* ===== rows ===== */
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
}
.row > div{min-width:0}

/* ===== pill ===== */
.pill{
  padding:8px 10px;
  border-radius:999px;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  font-weight:800;
  font-size:13px;
  color:#0f172a;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===== buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 12px;border-radius:14px;border:1px solid var(--border);
  background:var(--card);
  font-weight:900;
  cursor:pointer;
  user-select:none;
}
.btn.primary{
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  border-color:transparent; color:#fff;
  box-shadow:0 14px 28px rgba(37,99,235,.25);
}
.btn:active{transform:translateY(1px)}
.small{font-size:12px;color:var(--muted)}

/* action buttons kecil */
.btn.sm{
  padding:8px 10px;
  border-radius:12px;
  font-weight:900;
  font-size:13px;
}
.btn.danger{
  background:#fff;
  border-color:#fecaca;
  color:#b91c1c;
}
.btn.danger:hover{ background:#fff5f5; }
.actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* ===== table ===== */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:16px;
}
.table th,.table td{
  padding:12px 12px;
  border-bottom:1px solid var(--border);
  font-size:14px;
  vertical-align:top;
}
.table th{background:#f8fafc;color:#334155;text-align:left}
.table tr:last-child td{border-bottom:none}
.money.plus{color:var(--success);font-weight:900}
.money.minus{color:var(--danger);font-weight:900}

/* ===== placeholders ===== */
.chartBox{
  height:220px;
  border-radius:16px;
  background:linear-gradient(180deg,#f8fafc, #ffffff);
  border:1px dashed #cbd5e1;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted); font-weight:800;
}

/* report list safety */
#catList .row{align-items:center}
#catList .row > div:first-child{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ===== Mobile: Manage Transactions jadi card ===== */
@media (max-width: 768px){
  #manageTable thead{ display:none; }
  #manageTable, #manageTable tbody, #manageTable tr, #manageTable td{
    display:block; width:100%;
  }
  #manageTable tr{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:14px;
    margin-bottom:12px;
  }
  #manageTable td{ border:none; padding:6px 0; }
  #manageTable td:nth-child(1)::before{content:"Tarikh";font-size:12px;color:#64748b;display:block;}
  #manageTable td:nth-child(2)::before{content:"Butiran";font-size:12px;color:#64748b;display:block;}
  #manageTable td:nth-child(3)::before{content:"Jumlah";font-size:12px;color:#64748b;display:block;}
  #manageTable td:nth-child(4){ text-align:left !important; margin-top:10px; }
  #manageTable td:nth-child(4)::before{content:"Tindakan";font-size:12px;color:#64748b;display:block;margin-bottom:6px;}
  #manageTable .actions{ display:flex; gap:10px; flex-wrap:wrap; }
  #manageTable .btn.sm{ padding:6px 10px; font-size:12px; }
}

/* ===== Pie legend (CUSTOM) ===== */
/* ✅ FIX: paksa 5 kolum (1fr) supaya confirm 5 sebaris */
.chart-legend-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  justify-content:center;
  gap:10px 16px;
  margin-top:12px;
  font-size:13px;
  color:#475569;
  max-width:520px;           /* supaya nampak kemas bawah pie */
  margin-left:auto;
  margin-right:auto;
}
.chart-legend-grid .item{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;               /* penting untuk ellipsis */
}
.chart-legend-grid .dot{
  width:12px;height:12px;border-radius:3px;
  flex:0 0 12px;
}
.chart-legend-grid .item span:last-child{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ===== Pie legend (custom) force 5 per row ===== */
.chart-legend-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  justify-content:center;
  gap:10px 14px;
  margin-top:12px;
  font-size:13px;
  color:#475569;
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
}
.chart-legend-grid .item{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chart-legend-grid .dot{
  width:10px;height:10px;border-radius:3px;flex:0 0 10px;
}