body {
            display: flex;
            min-height: 100vh;
            flex-direction: column;
        }
        .main-container {
            flex: 1;
            display: flex;
        }
        .sidebar {
            width: 220px;
            background-color: #0b233f;
            padding-top: 20px;
        }
        .sidebar a {
            padding: 10px 20px;
            display: block;
            color: #FFFFFF;
            text-decoration: none;
        }
        .sidebar a:hover {
            background-color: #e2e6ea;
        }
        .content {
            flex-grow: 1;
            padding: 20px;
        }
        footer {
            background-color: #0b233f;
            text-align: center;
            color: #FFFFFF;
            padding: 12px 0;
        }






        * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', sans-serif;
    }

    body {
      background: #f4f6f8;
      color: #333;
      line-height: 1.6;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    /* Header */
    .header {
      background: linear-gradient(135deg, #4e73df, #1cc88a);
      color: white;
      text-align: center;
      padding: 3rem 1rem;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }

    .header h1 {
      font-size: 2.5rem;
      margin-bottom: 0.5rem;
    }

    .header p {
      font-size: 1.2rem;
    }

.features {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;        
  gap: 0.5rem;              
  padding: 0.5rem;
  margin: 0 auto;
}

/* Base card style */
.features > .card {
  height: 100px;
  color: white;
  text-align: left;
  padding: 1rem;
  border-radius: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
}

/* Sizes for different cards */
.features > .card:first-child,
.features > .card:last-child {
  flex: 1.1;
}

.features > .card:nth-child(2),
.features > .card:nth-child(3),
.features > .card:nth-child(4) {
  flex: 0.9;
}

/* Hover effect */
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* Icon placement */
.icon {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  font-size: 1.5rem;
  opacity: 0.9;
}

/* Text styling */
.card h6 {
  margin: 0;
  color: white;
  font-weight: 600;
  font-size: 1rem;
}

.card p {
  margin: 0.2rem 0;
  font-size: 0.9rem;
}

.card p a {
  text-decoration: none;
  color: #fff;
  font-weight: 600;
}

.card p a:hover {
  text-decoration: underline;
}

/* Remove link underline globally inside cards */
.features .card a {
  text-decoration: none;
  color: inherit;
}

.features .card a:hover {
  cursor: pointer;
}

/* 🌈 Gradient backgrounds (shade → tint) */
#inventory { background: linear-gradient(to right, #cc6262, #ff9d9e); }   /* dark coral to light coral */
#in-circulation   { background: linear-gradient(to right, #1a3e68, #3c74c2); }   /* dark navy to lighter blue */
#creditors { background: linear-gradient(to right, #805511, #d99a33); }   /* dark gold to soft amber */
.features > .card:nth-child(4) { background: linear-gradient(to right, #4e5fb1, #8b9af1); }  /* indigo to periwinkle */
.features > .card:nth-child(5) { background: linear-gradient(to right, #237a18, #58d44b); }  /* dark green to bright lime */
















/* Graphs container */
.graphs {
  display: flex;
  flex direction: : row;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;       /* all on one row */
  gap: 0.7rem;
  margin-top: 1rem;
  padding: 0.5rem;
}

/* Each graph card */
.graph-card {
  flex: 1;
  background-color: #fff;  /* clean white background */
  border-radius: 0;
  padding: 1rem;
  color: #333;
  height: 220px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.graph-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* Graph heading */
.graph-card h6 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #222;
}

/* Placeholder (for now, until graphs are added) */
.graph-placeholder {
  margin-top: 1rem;
  height: 150px;
  background-color: rgba(0, 0, 0, 0.04);
  border: 1px dashed rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: #666;
}








/* Leaderboards container */
.leaderboards {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;        /* keep them in one row */
  gap: 0.7rem;
  margin-top: 1rem;
  padding: 0.5rem;
}

/* Each leaderboard card */
.leader-card {
  flex: 1;
  background-color: #fff;   /* same clean white background */
  border-radius: 0;
  padding: 1rem;
  color: #333;
  height: 220px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.leader-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* Headings */
.leader-card h6 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #222;
}

/* Placeholder box for leaderboard content */
.leader-placeholder {
  margin-top: 1rem;
  height: 150px;
  background-color: rgba(0, 0, 0, 0.04);
  border: 1px dashed rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: #666;
}




#leader-activity-summary {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}