/* ============================================================
   HRIS.CSS — HR & Payroll System Page Styles
   Extends /css/styles.css with sky/blue HR theme
   ============================================================ */

/* ── HERO ── */
.hris-hero {
  position: relative;
  background: linear-gradient(135deg, #0c1a2e 0%, #0f3460 45%, #0c1a2e 100%);
  overflow: hidden;
  padding: 7rem 0 5rem;
  color: #fff;
}
.hris-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 80% 20%, rgba(14,165,233,.22) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(59,130,246,.18) 0%, transparent 60%);
}
.hris-hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .35;
  pointer-events: none;
}
.hris-hero__glow.g1 { width: 500px; height: 500px; background: #0284c7; top: -120px; right: -80px; }
.hris-hero__glow.g2 { width: 380px; height: 380px; background: #2563eb; bottom: -100px; left: -60px; }

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

.hris-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(14,165,233,.18);
  border: 1px solid rgba(14,165,233,.35);
  border-radius: 999px;
  padding: .35rem .9rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #7dd3fc;
  margin-bottom: 1.25rem;
}

.hris-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;
}

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

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

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

.hris-hero__trust {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: .82rem;
  color: #7dd3fc;
}
.hris-hero__trust span { display: flex; align-items: center; gap: .35rem; }
.hris-hero__trust i    { color: #38bdf8; }

/* ── DASHBOARD MOCK ── */
.hris-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);
}

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

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

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

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

.hris-dash__kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.hris-dash__kpi {
  background: rgba(14,165,233,.15);
  border: 1px solid rgba(14,165,233,.2);
  border-radius: 10px;
  padding: .6rem .75rem;
  text-align: center;
}
.hris-dash__kpi-val { display: block; font-size: 1rem; font-weight: 800; color: #e0f2fe; }
.hris-dash__kpi-lbl { display: block; font-size: .62rem; color: #7dd3fc; margin-top: .15rem; }

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

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

.hris-dash__alert {
  background: rgba(14,165,233,.15);
  border: 1px solid rgba(14,165,233,.3);
  border-radius: 8px;
  padding: .55rem .75rem;
  font-size: .72rem;
  color: #bae6fd;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.hris-dash__alert i { color: #38bdf8; flex-shrink: 0; }

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

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

/* ── PRICING FEATURED ── */
.erp-price-card--hris-featured {
  background: linear-gradient(135deg, #0f3460 0%, #0c1a2e 100%);
  border: 2px solid #0284c7;
  color: #fff;
  position: relative;
}
.erp-price-card--hris-featured .erp-price-card__price,
.erp-price-card--hris-featured .erp-price-card__name { color: #fff; }
.erp-price-card--hris-featured .erp-price-card__desc  { color: #bae6fd; }
.erp-price-card--hris-featured li                     { color: #e0f2fe; }
.hris-price-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #0284c7, #2563eb);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: .3rem .9rem;
  border-radius: 999px;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* ── CTA SECTION ── */
.hris-cta {
  background: linear-gradient(135deg, #0c1a2e 0%, #0f3460 60%, #0c1a2e 100%);
  padding: 5rem 0;
  color: #fff;
}
.hris-cta__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.hris-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;
}
.hris-cta__copy p { color: #bae6fd; line-height: 1.7; margin-bottom: 1.5rem; }
.hris-cta__perks  { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.hris-cta__perks li { display: flex; align-items: center; gap: .5rem; color: #7dd3fc; font-size: .92rem; }
.hris-cta__perks i  { color: #38bdf8; }

.hris-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);
}
.hris-cta__form h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 1.25rem;
}
.hris-form__note { font-size: .75rem; color: #7dd3fc; margin-top: .6rem; text-align: center; }

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