/* =============================================================================
   Africa Conglomerate — Site-wide custom utilities
   All colours sourced from theme.css variables — do not hardcode hex here.
   ============================================================================= */

.magini {
  padding-left: 2em;
  padding-top: .5em;
}
.center {
  margin: auto;
  width: 60%;
  padding: 10px;
}
.setula {
  margin-left: 30px;
}
.kizitowa {
  padding-left: 30px;
}
.kyeluse {
  color: var(--text-danger-custom);
}


/* ── Star rating ─────────────────────────────────────────────────────────── */

/* Default (unselected) star colour */
.star-rating {
  color: var(--star-default);
  font-size: 2em;
}

/* The star glyph itself */
.my-star::before {
  content: "\002605";
}

/* Remove the default italic style inherited from some parent elements */
.my-star {
  font-style: unset !important;
}

/* Selected star */
.is-active {
  color: var(--accent-orange);
}

/* Hover on unselected star */
.my-star:not(.is-active):hover {
  color: var(--accent-orange);
}


/* ── Approval timeline ───────────────────────────────────────────────────── */

.timeline {
  border-left: 2px solid var(--timeline-border);
  margin-left: 20px;
  padding-left: 20px;
}

.timeline-item {
  position: relative;
  margin-bottom: 24px;
}

.timeline-item .dot {
  position: absolute;
  left: -31px;
  top: 4px;
  width: 12px;
  height: 12px;
  background: var(--timeline-dot-default);
  border-radius: 50%;
}

/* Semantic status dots — these colours are intentional in both modes */
.dot.pending  { background: orange; }
.dot.approved { background: green; }
.dot.rejected { background: red; }

.timeline-item .content {
  background: var(--timeline-content-bg);
  padding: 10px 14px;
  border-radius: 6px;
}

/* ── Status badges ───────────────────────────────────────────────────────── */
/* Semantic colours intentionally kept consistent across modes */
.badge-approved { background: #28a745; color: white; }
.badge-rejected { background: #dc3545; color: white; }
.badge-pending  { background: #ffc107; color: black; }