/* /assets/css/appcenter.css */

:root{
  --bg0:#070A12;
  --bg1:#0B1020;
  --card: rgba(17, 22, 35, .62);
  --card-strong: rgba(17, 22, 35, .78);
  --border: rgba(255,255,255,.08);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);

  --accent-purple:#7C3AED;  /* lila */
  --accent-blue:#22D3EE;    /* cyan/blå */
  --accent-pink:#FB7185;    /* rosa-ish */
}

html, body{
  height: 100%;
}

body.appcenter-bg{
  color: var(--text);
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(700px 500px at 85% 15%, rgba(34,211,238,.18), transparent 55%),
    radial-gradient(900px 700px at 50% 100%, rgba(251,113,133,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

.navbar.appcenter-nav{
  background: rgba(10,12,18,.55) !important;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

.glass-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
}

.glass-card:hover{
  transform: translateY(-1px);
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow:
    0 14px 34px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.kpi-card{
  min-height: 128px;
}

.kpi-gradient{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(600px 240px at 15% 10%, rgba(124,58,237,.60), transparent 60%),
    radial-gradient(500px 240px at 85% 20%, rgba(34,211,238,.35), transparent 55%),
    linear-gradient(135deg, rgba(124,58,237,.35), rgba(34,211,238,.12));
}

.kpi-gradient::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(300px 140px at 30% 25%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(240px 120px at 75% 35%, rgba(255,255,255,.06), transparent 60%);
  pointer-events:none;
}

.kpi-title{
  color: var(--muted);
  font-size: .9rem;
  letter-spacing: .02em;
}

.kpi-big{
  font-size: 2.35rem;
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.kpi-sub{
  color: var(--muted);
  font-size: .95rem;
}

.badge-soft{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.82) !important;
}

.app-card .card-body{
  padding: 1rem;
}

.app-icon{
  width:56px;
  height:56px;
  object-fit: cover;
  border-radius: 14px;
}

.app-icon-fallback{
  width:56px;
  height:56px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}

.section-title{
  color: rgba(255,255,255,.85);
}

.section-meta{
  color: rgba(255,255,255,.55);
}

/* --- Section header with dynamic line --- */

.section-header {
  gap: .5rem;
}

.section-line {
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.35),
    rgba(255,255,255,.12)
  );
  opacity: .6;
}

/* Optional: lite extra elegans */
.section-header:hover .section-line {
  background: linear-gradient(
    90deg,
    rgba(124,58,237,.65),
    rgba(34,211,238,.35)
  );
  transition: background .25s ease;
}