/* ============================================================
   admin-refine.css — Admin + Administrator polish layer
   (loads LAST, after admin-fx.css). Sharper, smoother charts,
   more compact KPIs, professional light tables, and styling for
   the new Gift Cards tab. Purely additive.
   ============================================================ */

:root {
  --ink: #1b2230;
  --ink-2: #5b6675;
  --line: rgba(27, 34, 48, .08);
  --line-2: rgba(27, 34, 48, .13);
  --shadow-sm: 0 1px 2px rgba(27,34,48,.05), 0 1px 4px rgba(27,34,48,.04);
  --shadow: 0 4px 14px rgba(27,34,48,.07), 0 2px 5px rgba(27,34,48,.04);
  --shadow-lg: 0 16px 40px rgba(27,34,48,.13), 0 5px 14px rgba(27,34,48,.08);
}

/* calmer aurora behind the dashboards */
body::before { filter: blur(26px) saturate(112%); opacity: .7; }

/* ---------- topbar / sidebar: a touch more compact ---------- */
.topbar { height: 56px; }
.content { padding: 20px 24px 56px; }
.sidebar { width: 226px; }
.nav-item { padding: 9px 12px; font-size: 13.5px; }

/* ---------- KPI cards: compact, crisp, lighter ---------- */
.kpis { gap: 13px; margin-bottom: 20px; }
.kpi { padding: 15px 17px; border-radius: 13px; }
.kpi .label { font-size: 12px; margin-bottom: 5px; }
.kpi .val { font-size: 23px; }
.kpi .sub { font-size: 11.5px; }
.kpi::before { width: 3px; }

/* ---------- panels & tables: professional, denser ---------- */
.card, .panel { border-radius: 13px; box-shadow: var(--shadow) !important; }
.panel-head { padding: 13px 17px; }
.panel-head h3 { font-size: 14.5px; }
table.tbl { font-size: 13px; }
table.tbl th { padding: 9px 15px; font-size: 11px; }
table.tbl td { padding: 9px 15px; }

/* ---------- charts: sharper + smoother ---------- */
/* sparkline — rounded gradient bars that grow in on render */
.spark { gap: 4px; height: 96px; align-items: flex-end; }
.spark .b {
  background: linear-gradient(180deg, #ff6470 0%, var(--brand) 70%, var(--brand-dark) 100%) !important;
  border-radius: 5px 5px 2px 2px; box-shadow: 0 2px 6px rgba(225,29,42,.18);
  transform-origin: bottom; animation: barGrow .55s cubic-bezier(.2,.85,.3,1) both;
}
.spark .b:hover { filter: brightness(1.08) saturate(1.1); box-shadow: 0 4px 12px rgba(225,29,42,.3); }
@keyframes barGrow { from { transform: scaleY(0); opacity: .4; } to { transform: scaleY(1); opacity: 1; } }

/* horizontal bar rows — smoother fill with sheen + ease-in width */
.bar-track { height: 10px; background: rgba(27,34,48,.06); }
.bar-fill {
  background: linear-gradient(90deg, var(--brand-dark), var(--brand) 60%, #ff6470) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3); position: relative;
  animation: fillIn .7s cubic-bezier(.2,.85,.3,1) both;
}
@keyframes fillIn { from { width: 0 !important; opacity: .5; } }

/* ---------- gift cards tab ---------- */
.gc-fresh {
  margin-top: 14px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(150deg, rgba(225,29,42,.06), rgba(122,21,48,.04));
  border: 1px dashed rgba(225,29,42,.3);
  animation: fxIn .4s cubic-bezier(.2,.8,.2,1) both;
}
.gc-codes { display: flex; flex-wrap: wrap; gap: 7px; max-height: 168px; overflow-y: auto; }
.gc-code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; font-weight: 800;
  letter-spacing: .03em; color: var(--brand-dark);
  background: #fff; border: 1px solid rgba(225,29,42,.22); border-radius: 9px; padding: 6px 10px;
  box-shadow: var(--shadow-sm);
}
.gc-code:hover { border-color: var(--brand); }

/* ---------- staggered chart entrances respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .spark .b, .bar-fill, .gc-fresh { animation: none !important; }
}
@media (max-width: 860px) {
  .content { padding: 16px 14px 48px; }
}