:root { 
  --brand: #d4d4d8; /* Silver/light grey */
  --ink: #e4e4e7;
  --bg-body: #121212;       /* Dark grey background, NOT pure black */
  --bg-card: #1e1e1e;       /* Slightly lighter grey for cards */
  --bg-card-header: #262626;
  --border-color: #333333;
}

body {
  background: var(--bg-body);
  color: var(--ink);
  font-family: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Navbar - Pure black to blend with the logo */
.navbar {
  background: #000000;
  border-bottom: 1px solid var(--border-color);
}
.navbar .navbar-brand, 
.navbar .nav-link { 
  color: #a1a1aa; 
}
.navbar .nav-link:hover, 
.navbar .navbar-brand:hover,
.navbar .nav-link.active { 
  color: #ffffff; 
}

/* Cards */
.card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: .75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}
.card-header {
  background: var(--bg-card-header);
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
  color: #ffffff;
}
.card-body {
  color: var(--ink);
}

/* Text & Numbers */
.stat { 
  font-size: 1.4rem; 
  font-weight: 600; 
  color: #ffffff;
}
.num { 
  font-variant-numeric: tabular-nums; 
}

/* Badges */
.badge-status { 
  background: #333333; 
  color: #d4d4d8; 
  font-weight: 500; 
}
.badge-status.done { 
  background: #14532d; 
  color: #86efac; 
}

/* Progress Bars */
.progress { 
  height: .45rem; 
  background: #333333; 
}
.progress-bar { 
  background: #a1a1aa; 
}
.progress-bar.paid { 
  background: #22c55e; 
}

/* Timeline */
.timeline { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
  position: relative; 
}
.timeline::before { 
  content: ""; 
  position: absolute; 
  inset-inline-start: 9px; 
  top: 8px; 
  bottom: 8px;
  width: 2px; 
  background: #333333; 
}
.tl-item { 
  position: relative; 
  padding-inline-start: 2.5rem; 
  margin-bottom: 1rem; 
}
.tl-dot { 
  position: absolute; 
  inset-inline-start: 2px; 
  top: 1rem; 
  width: 16px; 
  height: 16px;
  border-radius: 50%; 
  background: #52525b; 
  border: 3px solid var(--bg-body); 
}
.tl-item.done .tl-dot { 
  background: #22c55e; 
}
.tl-item.next .tl-dot { 
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .15); 
}

/* Thumbnails */
.thumb { 
  width: 92px; 
  height: 92px; 
  object-fit: cover; 
  border-radius: .5rem;
  border: 1px solid var(--border-color); 
}

/* Forms */
.form-control, .form-select {
  background-color: #121212;
  border-color: #3f3f46;
  color: #e4e4e7;
}
.form-control:focus, .form-select:focus {
  background-color: #121212;
  border-color: #a1a1aa;
  color: #ffffff;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.1);
}

/* Specific tweak for the "Next Stage" active card */
.tl-item.next .card {
  border-color: #52525b;
  box-shadow: 0 0 0 1px #52525b, 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Logo tweak to prevent any clipping */
.navbar-brand img {
  border-radius: 6px;
}