/* ===========================================================
   style.css — AURORA LITE THEME ENGINE
   Pure Light Mode Only — Corporate clean look
=========================================================== */

:root {
  --ks-bg:            #f3f4fb;
  --ks-bg-soft:       #eef1ff;
  --ks-bg-card:       #ffffff;

  --ks-border-soft:   #e2e8f0;
  --ks-border-strong: #cbd5e1;

  --ks-text-main:     #0f172a;
  --ks-text-soft:     #6b7280;

  --ks-accent:        #2563eb;
  --ks-accent-soft:   #3b82f6;
  --ks-accent-green:  #16a34a;
  --ks-accent-orange: #ea580c;

  --ks-shadow-soft:   0 14px 32px rgba(15,23,42,.06);

  --ks-radius-card:   16px;
  --ks-radius-pill:   999px;

  --ks-gradient-bg:   radial-gradient(circle at top, #eef2ff 0, #e5e7eb 40%, #e2e8f0 100%);
}

/* Body */
body {
  background: var(--ks-gradient-bg);
  color: var(--ks-text-main);
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* Headings */
h1, h2, h3, h4 {
  color: var(--ks-text-main);
  margin: 0 0 8px;
  font-weight: 700;
}

/* Utilities */
.row-inline {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.center { text-align: center; }
.hidden { display: none !important; }
/* ===============================
   COLLECTION DASHBOARD (LIGHT FIX)
=============================== */

.collection-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.coll-card {
  background: var(--ks-bg-card);
  border: 1px solid var(--ks-border-soft);
  box-shadow: var(--ks-shadow-soft);
  padding: 16px;
  border-radius: var(--ks-radius-card);
  text-align: center;
}

.coll-card h4 {
  font-size: 13px;
  color: var(--ks-text-soft);
  margin-bottom: 8px;
  font-weight: 600;
}

.coll-card h2 {
  font-size: 20px;
  margin: 0;
  color: var(--ks-accent-green);
}


/* ===============================
   COLLECTION CHARTS (LIGHT FIX)
=============================== */

.collection-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: 20px;
  margin-top: 25px;
}

.chart-box {
  background: var(--ks-bg-card);
  border: 1px solid var(--ks-border-soft);
  box-shadow: var(--ks-shadow-soft);
  padding: 16px;
  border-radius: var(--ks-radius-card);
  height: 280px;
}