/*
  Modern dark theme for AfriHelp Scholarships homepage.
  This stylesheet builds a two‑column dashboard layout inspired by
  the provided scholarship app design. Variables define colours and
  spacing so the look and feel can be tweaked easily. Cards, tabs
  and buttons use gradients and subtle shadows to create depth and
  a premium feel.
*/

/* Colour palette and layout variables */
:root {
  --bg-color: #041a40;           /* Page background */
  --panel-color: #0b2d66;        /* Panels and cards */
  --card-color: #0c3b78;         /* Inner card backgrounds */
  --primary: #2560e0;            /* Primary blue for buttons and active tabs */
  --secondary: #1949b7;          /* Darker blue for hover states */
  --green: #1fa76a;              /* Green for open tags and status */
  --orange: #de7929;             /* Orange for prizes and highlights */
  --text-main: #ffffff;          /* Main text colour */
  --text-muted: #8ba8ce;         /* Muted text colour */
  --radius: 12px;                /* Base border radius */
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.35); /* Shared shadow */
  --transition: 0.2s ease;       /* Transition timing */
}

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: var(--bg-color);
  color: var(--text-main);
  line-height: 1.5;
}

img { max-width: 100%; display: block; }

/* Top navigation bar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 2rem;
  /* Dark gradient for the header */
  background: linear-gradient(90deg, #0b2e62, #071d45);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar .logo-area {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.3rem;
  font-weight: 600;
}

.topbar .logo-area img {
  width: 32px;
  height: 32px;
}

.nav-menu {
  display: flex;
  gap: 1.5rem;
  font-size: 0.95rem;
}

.nav-menu a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.4rem 0;
  transition: color var(--transition);
}

.nav-menu a:hover,
.nav-menu a.active {
  color: var(--primary);
}

/* Dashboard content container */
.dashboard-content {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
}

@media (max-width: 900px) {
  .dashboard-content {
    flex-direction: column;
  }
}

/* Sidebar (left column) */
.sidebar {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

@media (max-width: 900px) {
  .sidebar {
    flex: 1 1 auto;
  }
}

/* Profile card */
.profile-card {
  background: var(--panel-color);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.profile-header img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.profile-header .text {
  display: flex;
  flex-direction: column;
}

.profile-header .text .welcome {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.profile-header .text .name {
  font-size: 1.1rem;
  font-weight: 600;
}

/* Wallet cards */
.wallet-section {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.wallet-card {
  background: linear-gradient(135deg, #0c3269, #0a2a55);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  color: var(--text-main);
  box-shadow: var(--shadow);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wallet-card .info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.wallet-card .title {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.wallet-card .amount {
  font-size: 1.5rem;
  font-weight: 700;
}

.wallet-card .status {
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.wallet-card .status .indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.wallet-card.wallet .status .indicator {
  background: var(--green);
}

.wallet-card.winnings .status .indicator {
  background: var(--orange);
}

/* Add emojis for wallet and winnings cards */
.wallet-card::before {
  margin-right: 0.8rem;
  font-size: 1.4rem;
}
.wallet-card.wallet::before {
  content: "\1F4BC"; /* briefcase emoji for contest wallet */
}
.wallet-card.winnings::before {
  content: "\1F3C6"; /* trophy emoji for winnings */
}

/* Action buttons */
.actions {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 0.8rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  background: linear-gradient(90deg, #1c4487, #162e63);
  color: var(--text-main);
  box-shadow: var(--shadow);
  transition: background var(--transition);
}

.action-btn .icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #fff;
}

.action-btn.deposit .icon {
  background: var(--green);
}

.action-btn.withdraw .icon {
  background: var(--orange);
}

.action-btn:hover {
  background: linear-gradient(90deg, #215ab0, #173f78);
}

/* Active contests section */
.active-contests {
  background: var(--panel-color);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.active-contests .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.active-contests .header h3 {
  font-size: 1rem;
}

.active-contests .header a {
  font-size: 0.75rem;
  color: var(--primary);
  text-decoration: none;
}

.contest-entry {
  background: var(--card-color);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.contest-entry img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

.contest-body {
  padding: 0.8rem 0.6rem;
}

.contest-body h4 {
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.contest-body .subtitle {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}

.contest-body .contest-details {
  font-size: 0.65rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

.progress-container {
  margin-bottom: 0.4rem;
}

.progress-bar {
  background: #1b3d7b;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar div {
  background: linear-gradient(90deg, #2e7be5, #2cb0c9, #2fd384);
  height: 100%;
}

.rank {
  font-size: 0.65rem;
  color: var(--text-muted);
}

/* Main panel / right column */
.main-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.discover-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.discover-header .icon {
  width: 24px;
  height: 24px;
  background: var(--orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.discover-header h2 {
  font-size: 1.4rem;
  font-weight: 600;
}

/* Tab filters */
.tab-filters {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.tab-filters .tab {
  padding: 0.4rem 1rem;
  font-size: 0.8rem;
  border-radius: var(--radius);
  background: var(--panel-color);
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.tab-filters .tab.active,
.tab-filters .tab:hover {
  background: var(--primary);
  color: #fff;
}

/* Search area */
.search-area {
  display: flex;
  margin-top: 0.8rem;
}

.search-area input {
  flex: 1;
  padding: 0.6rem 1rem;
  border-radius: var(--radius) 0 0 var(--radius);
  border: none;
  background: var(--panel-color);
  color: var(--text-main);
  font-size: 0.9rem;
  outline: none;
}

.search-area input::placeholder {
  color: var(--text-muted);
}

.search-area button {
  padding: 0.6rem 1.5rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  border: none;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}

.search-area button:hover {
  background: var(--secondary);
}

/* Contest list */
.contest-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contest-item {
  /* Subtle gradient for contest cards */
  background: linear-gradient(135deg, #0c356d, #0a264f);
  border-radius: var(--radius);
  padding: 0.6rem;
  box-shadow: var(--shadow);
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  position: relative;
}

.contest-item img {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius);
}

.contest-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.contest-body .open-tag {
  background: var(--green);
  color: #fff;
  font-size: 0.6rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius);
  width: max-content;
}

.contest-body h3 {
  font-size: 1rem;
  font-weight: 600;
}

.contest-body .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: 0.65rem;
  color: var(--primary);
}

.contest-body .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  font-size: 0.65rem;
  color: var(--text-muted);
}

.contest-body .meta .icon {
  margin-right: 0.2rem;
}

.contest-body .grand-prize {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.contest-body .grand-prize span {
  color: var(--orange);
  font-weight: 600;
}

.enter-btn {
  background: var(--primary);
  color: #fff;
  font-size: 0.75rem;
  padding: 0.6rem 1rem;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
  align-self: center;
}

.enter-btn:hover {
  background: var(--secondary);
}

/* Footer */
.site-footer {
  padding: 1rem 2rem;
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-muted);
}