/* =========================
   Kenyan Flag Color Variables
========================= */
:root {
  --kenya-black: #000000;
  --kenya-red: #BB0000;
  --kenya-green: #006600;
  --kenya-white: #FFFFFF;
}

/* =========================
   Base Page Styling
   (Navbar NOT affected)
========================= */
body {
  background-color: var(--kenya-white);
  color: var(--kenya-black);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* =========================
   Headings
========================= */
h3, h4 {
  color: var(--kenya-red);
  font-weight: 700;
  text-align: center;
}

h4 {
  margin-top: 1.5rem;
  border-bottom: 3px solid var(--kenya-green);
  padding-bottom: 0.3rem;
}

/* =========================
   Forms
========================= */
.form-label {
  color: var(--kenya-green);
  font-weight: 600;
}

.form-select {
  border: 2px solid var(--kenya-black);
  border-radius: 6px;
  color: var(--kenya-black);
}

.form-select:focus {
  border-color: var(--kenya-red);
  outline: none;
  box-shadow: 0 0 6px var(--kenya-red);
}

/* =========================
   Summary Card
========================= */
.card.text-white {
  background-color: var(--kenya-green) !important;
  border: 2px solid var(--kenya-black);
}

.card-title,
.card-text {
  color: var(--kenya-white);
  text-align: center;
}

/* =========================
   Tables (Desktop)
========================= */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table thead {
  background-color: var(--kenya-black);
  color: var(--kenya-white);
}

.table th,
.table td {
  padding: 0.75rem;
  border: 1px solid var(--kenya-black) !important;
  vertical-align: middle;
}

/* Kenyan flag row striping */
.table tbody tr:nth-child(4n+1) {
  background-color: var(--kenya-white);
}

.table tbody tr:nth-child(4n+2) {
  background-color: #f8f8f8;
}

.table tbody tr:nth-child(4n+3) {
  background-color: #fff3f3;
}

.table tbody tr:nth-child(4n+4) {
  background-color: #f3fff3;
}

/* Total Row */
.table tbody tr:last-child {
  background-color: var(--kenya-black) !important;
  color: var(--kenya-white);
  font-weight: bold;
}

/* =========================
   Row Highlight Animation
========================= */
@keyframes highlight {
  0% { background-color: var(--kenya-red); color: var(--kenya-white); }
  100% { background-color: inherit; color: inherit; }
}

.highlight-row {
  animation: highlight 1.5s ease;
}

/* =========================
   Buttons
========================= */
.btn,
button {
  background-color: var(--kenya-red);
  color: var(--kenya-white);
  border: none;
}

.btn:hover,
button:hover {
  background-color: var(--kenya-green);
  color: var(--kenya-white);
}

/* =========================
   Responsive Tables (Mobile)
========================= */
@media (max-width: 768px) {
  .table thead {
    display: none;
  }

  .table,
  .table tbody,
  .table tr,
  .table td {
    display: block;
    width: 100%;
  }

  .table tr {
    margin-bottom: 1rem;
    border: 2px solid var(--kenya-black);
    border-radius: 8px;
    overflow: hidden;
  }

  .table td {
    padding: 0.75rem;
    text-align: right;
    position: relative;
    border: none !important;
    border-bottom: 1px solid var(--kenya-black) !important;
  }

  .table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    padding-left: 0.75rem;
    font-weight: bold;
    color: var(--kenya-green);
    text-align: left;
  }
}

/* =========================
   Small Screens Polish
========================= */
@media (max-width: 576px) {
  h3 {
    font-size: 1.4rem;
  }

  .card-text.display-6 {
    font-size: 2rem;
  }
}