/* ============================================================
   UMS.CSS — University Management System Page Styles
   Extends /css/styles.css with violet/indigo university theme
   ============================================================ */

/* ── HERO ── */
.ums-hero {
  position: relative;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 45%, #1e1b4b 100%);
  overflow: hidden;
  padding: 7rem 0 5rem;
  color: #fff;
}
.ums-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 80% 20%, rgba(139,92,246,.25) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(99,102,241,.2) 0%, transparent 60%);
}
.ums-hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .35;
  pointer-events: none;
}
.ums-hero__glow.g1 { width: 500px; height: 500px; background: #7c3aed; top: -120px; right: -80px; }
.ums-hero__glow.g2 { width: 380px; height: 380px; background: #4f46e5; bottom: -100px; left: -60px; }

.ums-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.ums-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(139,92,246,.2);
  border: 1px solid rgba(139,92,246,.4);
  border-radius: 999px;
  padding: .35rem .9rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #c4b5fd;
  margin-bottom: 1.25rem;
}

.ums-hero__title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 1.1rem;
}

.ums-gradient-text {
  background: linear-gradient(90deg, #a78bfa, #818cf8, #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ums-hero__sub {
  font-size: 1.05rem;
  color: #c4b5fd;
  line-height: 1.7;
  margin-bottom: 1.8rem;
  max-width: 520px;
}

.ums-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

.ums-hero__trust {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: .82rem;
  color: #a5b4fc;
}
.ums-hero__trust span { display: flex; align-items: center; gap: .35rem; }
.ums-hero__trust i { color: #818cf8; }

/* ── DASHBOARD MOCK ── */
.ums-dashboard-mock {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  box-shadow: 0 32px 80px rgba(0,0,0,.45);
}

.ums-dash__bar {
  background: rgba(255,255,255,.06);
  padding: .6rem 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.ums-dash__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ums-dash__dot.r  { background: #f87171; }
.ums-dash__dot.y  { background: #fbbf24; }
.ums-dash__dot.g  { background: #34d399; }
.ums-dash__title  { font-size: .75rem; color: #a5b4fc; margin-left: .5rem; font-weight: 600; }

.ums-dash__body { display: flex; min-height: 320px; }

.ums-dash__sidebar {
  background: rgba(255,255,255,.04);
  padding: 1rem .6rem;
  width: 130px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.ums-dash__nav-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .6rem;
  border-radius: 8px;
  font-size: .72rem;
  color: #a5b4fc;
  cursor: pointer;
  transition: background .2s;
}
.ums-dash__nav-item.active { background: rgba(139,92,246,.3); color: #fff; font-weight: 600; }
.ums-dash__nav-item i { font-size: .9rem; }

.ums-dash__main { flex: 1; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }

.ums-dash__kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.ums-dash__kpi {
  background: rgba(139,92,246,.15);
  border: 1px solid rgba(139,92,246,.2);
  border-radius: 10px;
  padding: .6rem .75rem;
  text-align: center;
}
.ums-dash__kpi-val { display: block; font-size: 1rem; font-weight: 800; color: #e0e7ff; }
.ums-dash__kpi-lbl { display: block; font-size: .62rem; color: #a5b4fc; margin-top: .15rem; }

.ums-dash__chart-placeholder {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: .75rem;
  flex: 1;
}
.ums-dash__chart-label { font-size: .68rem; color: #a5b4fc; margin-bottom: .6rem; font-weight: 600; }

.ums-dash__bars {
  display: flex;
  align-items: flex-end;
  gap: .4rem;
  height: 70px;
}
.ums-dash__bar-item {
  flex: 1;
  background: linear-gradient(180deg, #7c3aed 0%, #4f46e5 100%);
  border-radius: 4px 4px 0 0;
  height: var(--h, 50%);
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.ums-dash__bar-item span {
  font-size: .58rem;
  color: #c4b5fd;
  position: absolute;
  bottom: -18px;
}

.ums-dash__alert {
  background: rgba(99,102,241,.15);
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 8px;
  padding: .55rem .75rem;
  font-size: .72rem;
  color: #c7d2fe;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.ums-dash__alert i { color: #818cf8; flex-shrink: 0; }

/* ── STATS STRIP ── */
.ums-stats {
  background: linear-gradient(90deg, #312e81 0%, #1e1b4b 100%);
  padding: 2.5rem 0;
}
.ums-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
}
.ums-stats__num {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  color: #a78bfa;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.ums-stats__lbl { display: block; font-size: .82rem; color: #c4b5fd; margin-top: .25rem; }

/* ── UMS SECTION EYEBROW OVERRIDE ── */
.ums-hero ~ .prod-logos .prod-logo-pill:hover,
.erp-features .section-eyebrow,
.erp-modules .section-eyebrow,
.erp-pricing .section-eyebrow,
.erp-faq     .section-eyebrow {
  color: #7c3aed;
  background: rgba(124,58,237,.1);
  border-color: rgba(124,58,237,.25);
}

/* ── UMS FEATURE CARD HOVER ACCENT ── */
.erp-feat-card:hover { border-color: rgba(124,58,237,.25); }
.erp-mod-card:hover  { border-color: rgba(124,58,237,.2); }

.ums-icon--violet  { background: rgba(139,92,246,.12);  color: #7c3aed; }
.ums-icon--indigo  { background: rgba(99,102,241,.12);  color: #4f46e5; }
.ums-icon--blue    { background: rgba(59,130,246,.12);  color: #2563eb; }
.ums-icon--teal    { background: rgba(20,184,166,.12);  color: #0d9488; }
.ums-icon--purple  { background: rgba(168,85,247,.12);  color: #9333ea; }
.ums-icon--rose    { background: rgba(244,63,94,.12);   color: #e11d48; }
.ums-icon--amber   { background: rgba(245,158,11,.12);  color: #d97706; }
.ums-icon--green   { background: rgba(34,197,94,.12);   color: #16a34a; }
.ums-icon--sky     { background: rgba(14,165,233,.12);  color: #0284c7; }
.ums-icon--orange  { background: rgba(249,115,22,.12);  color: #ea580c; }

/* ── PRICING FEATURED ── */
.erp-price-card--ums-featured {
  background: linear-gradient(135deg, #312e81 0%, #1e1b4b 100%);
  border: 2px solid #7c3aed;
  color: #fff;
  position: relative;
}
.erp-price-card--ums-featured .erp-price-card__price,
.erp-price-card--ums-featured .erp-price-card__name { color: #fff; }
.erp-price-card--ums-featured .erp-price-card__desc  { color: #c4b5fd; }
.erp-price-card--ums-featured li                     { color: #e0e7ff; }
.ums-price-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #7c3aed, #4f46e5);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: .3rem .9rem;
  border-radius: 999px;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* ── CTA SECTION ── */
.ums-cta {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 60%, #1e1b4b 100%);
  padding: 5rem 0;
  color: #fff;
}
.ums-cta__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.ums-cta__copy h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  margin-bottom: 1rem;
  color: #fff;
}
.ums-cta__copy p { color: #c4b5fd; line-height: 1.7; margin-bottom: 1.5rem; }
.ums-cta__perks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.ums-cta__perks li { display: flex; align-items: center; gap: .5rem; color: #a5b4fc; font-size: .92rem; }
.ums-cta__perks i  { color: #7c3aed; }

.ums-cta__form {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 2rem;
  backdrop-filter: blur(12px);
}
.ums-cta__form h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 1.25rem;
}
.ums-form__note { font-size: .75rem; color: #a5b4fc; margin-top: .6rem; text-align: center; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .ums-hero__inner  { grid-template-columns: 1fr; }
  .ums-hero__visual { display: none; }
  .ums-stats__grid  { grid-template-columns: repeat(2, 1fr); }
  .ums-cta__inner   { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .ums-stats__grid { grid-template-columns: 1fr 1fr; }
  .ums-dash__sidebar { display: none; }
  .ums-dash__kpi-row { grid-template-columns: 1fr 1fr; }
}