/* Swap KPI semantics: Income=Green, Expense=Red, Pending=Blue */
:root{
  --accent:#0b2a5b;
  --accent2:#123a7a;
  --bg:#eef2f8;
  --card:rgba(255,255,255,.68);
  --stroke:rgba(255,255,255,.42);
  --shadow:0 18px 45px rgba(15,23,42,.10);
  --glow: 0 0 0 4px rgba(59,130,246,.14), 0 18px 45px rgba(15,23,42,.10);
  --kpi-red-1:#ff6b6b;
  --kpi-red-2:#ff3b30;
  --kpi-green-1:#34d399;
  --kpi-green-2:#10b981;
  --kpi-blue-1:#60a5fa;
  --kpi-blue-2:#3b82f6;
  --kpi-text:#0f172a;
}

*{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}
.bg-soft{
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(11,42,91,.12), transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, rgba(18,58,122,.12), transparent 55%),
    radial-gradient(900px 450px at 0% 100%, rgba(99,102,241,.08), transparent 55%),
    var(--bg);
}

.glass{
  background:var(--card);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow:var(--shadow);
}
.glass-nav{
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  border-bottom:1px solid rgba(15,23,42,.06);
}

.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border:0;border-radius:14px;
  box-shadow:0 10px 24px rgba(11,42,91,.22);
}
.btn-primary:hover{filter:brightness(1.04);}
.btn-ghost{
  background:rgba(255,255,255,.48);
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
}
.btn-ghost.active{
  border-color:rgba(59,130,246,.30);
  box-shadow:var(--glow);
}

.badge-soft{
  background:rgba(11,42,91,.08);
  color:var(--accent);
  border:1px solid rgba(11,42,91,.14);
}

/* nav pills */
.nav-pills-glass .btn{
  border-radius:999px !important;
  padding:.40rem .85rem;
  font-weight:600;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
  position:relative;
}
.nav-pills-glass .btn:hover{transform:translateY(-1px);}
.nav-pills-glass .btn.active{
  background:linear-gradient(135deg, rgba(96,165,250,.30), rgba(59,130,246,.18)) !important;
  border-color:rgba(59,130,246,.34) !important;
  box-shadow: var(--glow);
}
.nav-pills-glass .btn.active::after{
  content:"";position:absolute;inset:-1px;border-radius:999px;pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.35) inset;
}

/* table hover glass */
.table-hover-glass tbody tr{
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
  border-radius:14px;
}
.table-hover-glass tbody tr:hover{
  background:rgba(255,255,255,.38);
  box-shadow:0 12px 28px rgba(15,23,42,.08);
  transform:translateY(-1px);
}
.table-hover-glass tbody tr td:first-child{border-top-left-radius:14px;border-bottom-left-radius:14px;}
.table-hover-glass tbody tr td:last-child{border-top-right-radius:14px;border-bottom-right-radius:14px;}

/* KPI */
.kpi{position:relative;overflow:hidden;border-radius:20px;}
.kpi::before{content:"";position:absolute;inset:-2px;background:linear-gradient(135deg, rgba(255,255,255,.60), rgba(255,255,255,.10));opacity:.65;pointer-events:none;}
.kpi::after{content:"";position:absolute;top:-80px;right:-80px;width:220px;height:220px;border-radius:999px;opacity:.35;pointer-events:none;}
.kpi .kpi-label{color:rgba(15,23,42,.70);font-weight:600;}
.kpi .kpi-value{font-weight:800;color:var(--kpi-text);}

/* Income = GREEN */
.kpi-income{
  background:
    radial-gradient(600px 250px at 10% 10%, rgba(255,255,255,.75), transparent 55%),
    linear-gradient(135deg, rgba(52,211,153,.34), rgba(16,185,129,.18));
  border:1px solid rgba(16,185,129,.22);
}
.kpi-income::after{background:linear-gradient(135deg, rgba(52,211,153,.55), rgba(16,185,129,.35));}

/* Expense = RED */
.kpi-expense{
  background:
    radial-gradient(600px 250px at 10% 10%, rgba(255,255,255,.75), transparent 55%),
    linear-gradient(135deg, rgba(255,107,107,.40), rgba(255,59,48,.18));
  border:1px solid rgba(255,59,48,.20);
}
.kpi-expense::after{background:linear-gradient(135deg, rgba(255,107,107,.55), rgba(255,59,48,.35));}

/* Pending = BLUE (same) */
.kpi-pending{
  background:
    radial-gradient(600px 250px at 10% 10%, rgba(255,255,255,.75), transparent 55%),
    linear-gradient(135deg, rgba(96,165,250,.35), rgba(59,130,246,.18));
  border:1px solid rgba(59,130,246,.22);
}
.kpi-pending::after{background:linear-gradient(135deg, rgba(96,165,250,.55), rgba(59,130,246,.35));}

/* status dot */
.status-dot{
  width:10px;height:10px;border-radius:999px;display:inline-block;margin-right:10px;
  box-shadow:0 0 0 3px rgba(255,255,255,.55);
}
.status-dot.done{ background: rgba(148,163,184,1); }
.status-dot.active{ background: rgba(16,185,129,1); }
.status-dot.pending{ background: rgba(59,130,246,1); }