@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700&display=swap");

:root {
  --ep-bg-a: #f4fbf8;
  --ep-bg-b: #e9f4ff;
  --ep-brand-a: #006a67;
  --ep-brand-b: #1f6fa8;
  --ep-text: #1b2a32;
}

body {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--ep-text);
  font-size: 0.88rem;
}

.card-body {
  font-size: 0.86rem;
}

.form-label,
.form-control,
.form-select,
.btn {
  font-size: 0.8rem;
}

.table {
  font-size: 0.78rem;
}

.table thead th {
  font-size: 0.74rem;
  white-space: nowrap;
}

.bg-soft-pattern {
  background:
    radial-gradient(
      circle at 20% 10%,
      rgba(0, 106, 103, 0.09),
      transparent 28%
    ),
    radial-gradient(
      circle at 80% 10%,
      rgba(31, 111, 168, 0.1),
      transparent 30%
    ),
    linear-gradient(135deg, var(--ep-bg-a), var(--ep-bg-b));
  min-height: 100vh;
}

.header-gradient {
  background: linear-gradient(120deg, var(--ep-brand-a), var(--ep-brand-b));
}

.metric-card {
  border-left: 5px solid var(--ep-brand-b);
}

/* Information Switcher Styles */
@keyframes fadeEffect {
  0% { opacity: 0.2; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0.2; }
}

.info-switcher {
  margin-top: 0.75rem;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.65rem;
  padding: 0.55rem 0.75rem;
}

.info-switcher-text {
  margin-bottom: 0;
  animation: fadeEffect 5s ease-in-out infinite;
}