/* ====== Global Styles ====== */
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #0b0b0b; /* mono-900 */
  color: #fff;
}

/* ====== PL Brand Colors ====== */
/* Background gradient for the whole site */
body {
  background: linear-gradient(180deg, #1F0022 0%, #0b0b0b 100%);
  color: #fff;
  font-family: 'Inter', sans-serif;
}

/* Card styling */
.card-box {
  background: #24102a; /* dark purple tone instead of black */
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;
}

/* Proper card container */
.card-box {
  background: #24102a; /* dark purple tone */
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;
}

/* Card title */
.card-box h3 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #ccc;
}

/* Card values */
.card-value {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 2px;
}
.card-change {
  font-size: 12px;
  margin-bottom: 4px;
}
.card-subtext {
  font-size: 12px;
  opacity: 0.7;
}

/* Sparkline canvas inside cards */
.card-box canvas {
  height: 40px !important;
  max-height: 40px;
}



/* Dashboard Cards */
.card-box {
  background: #24102a; /* dark purple background */
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;
}

/* Title */
.card-box h3 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #ccc;
}

/* Values */
.card-value {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 2px;
}
.card-change {
  font-size: 12px;
  margin-bottom: 4px;
}
.card-subtext {
  font-size: 12px;
  opacity: 0.7;
}

/* Sparkline inside card */
.card-box canvas {
  height: 40px !important;
  max-height: 40px;
}

/* Make cards compact like CMC */
.card-box h3 {
  font-size: 13px;
  margin-bottom: 4px;
  color: #ccc;
}
.card-value {
  font-size: 18px;
  font-weight: 700;
}
.card-change {
  font-size: 12px;
  margin-bottom: 4px;
}
.card-subtext {
  font-size: 12px;
  opacity: 0.7;
}

/* Sparkline canvas height */
.card-box canvas {
  height: 40px !important;
  max-height: 40px;
}

/* Section heading */
.section-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #fff;
}

/* ====== Brand Colors ====== */
.bg-pl-main { background-color: #1F0022; }
.text-pl-main { color: #1F0022; }

/* Old PL purple (keep as secondary if needed) */
.bg-pl-purple { background-color: #37003c; }
.text-pl-purple { color: #37003c; }


.bg-pl-purple { background-color: #37003c; }
.text-pl-purple { color: #37003c; }

.bg-pl-yellow { background-color: #ebff00; }
.text-pl-yellow { color: #ebff00; }

.bg-pl-blue { background-color: #05f0ff; }
.text-pl-blue { color: #05f0ff; }

.bg-pl-lilac { background-color: #953bff; }
.text-pl-lilac { color: #953bff; }

.bg-pl-green { background-color: #00ff87; }
.text-pl-green { color: #00ff87; }

.bg-pl-orange { background-color: #ff6900; }
.text-pl-orange { color: #ff6900; }

.bg-pl-pink { background-color: #ff2882; }
.text-pl-pink { color: #ff2882; }

.text-pl-red { color: #fe1313; }



/* Make sparkline tiny */
canvas.h-8 {
  height: 32px !important;
  max-height: 32px !important;
}

/* ====== Neutral Backgrounds ====== */
.bg-mono-900 { background-color: #0b0b0b; }
.bg-mono-800 { background-color: #191919; }
.bg-mono-700 { background-color: #262626; }
.bg-mono-600 { background-color: #404040; }
.bg-mono-500 { background-color: #595959; }
.bg-mono-400 { background-color: #8c8c8c; }
.bg-mono-300 { background-color: #b2b2b2; }
.bg-mono-200 { background-color: #e5e5e5; }
.bg-mono-100 { background-color: #faf9fa; }

/* ====== Buttons ====== */
.btn {
  @apply px-4 py-2 rounded-md font-semibold transition;
}

.btn-primary {
  background: linear-gradient(90deg, #05f0ff, #953bff);
  color: white;
}
.btn-primary:hover { opacity: 0.9; }

.btn-secondary {
  background-color: #191919;
  color: #fff;
}
.btn-secondary:hover { background-color: #262626; }

/* ====== Tables ====== */
.table th, .table td {
  padding: 0.5rem 1rem;
}
.table th {
  background-color: #191919;
  color: #b2b2b2;
  text-align: left;
}
.table tr:hover {
  background-color: rgba(255,255,255,0.05);
}