/* These styles are generated from project.scss. */

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.header-logo{
  width: 40px;
  height: 40px;
  margin: 15px;
}

body {
  margin: 0;
  display: grid;
  grid-template-columns: 280px 1fr;
  height: 100vh;
}
.sidebar {
  background-color: #f8f9fa;
  padding: 1rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex; /* Add flexbox */
  flex-direction: column; /* Stack children vertically */
}

.sidebar-content {
  flex: 1; /* Take up remaining space */
}

.sidebar-footer {
  margin-top: auto; /* Push footer to the bottom */
}
.main-content {
  padding: 2rem;
  overflow-y: auto;
}

.nav-link{
  color: #5BD1D7;
  color: black;
}

.nav-link.active {
  background-color: #5BD1D7 !important; /* Change this to your desired color */
  color: rgb(59, 59, 59) !important; /* Ensure text is readable */
  border-radius: 15px; /* Optional: Round the corners */
  box-shadow: #06565a 0px 0px 5px; /* Optional: Add a shadow */
}

.nav-link:hover {
  color: #06565a !important; /* Ensure text is readable */
  scale: 1.05;
}

/* ===== Dashboard ===== */
.dashboard-hero {
  background: #fff;
  color: #1a1d20;
  border: 1px solid #eef0f2;
  border-radius: 18px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
}
.dashboard-hero h1 { font-weight: 600; margin: 0; letter-spacing: -0.01em; font-size: 1.6rem; }
.dashboard-hero .hero-sub { color: #6c757d; font-size: 0.9rem; }

.section-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6c757d;
  margin: 1.5rem 0 0.75rem;
}

.kpi-card {
  border: 1px solid #eef0f2;
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  background: #fff;
  height: 100%;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.kpi-card .kpi-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.kpi-card .kpi-value { font-size: 1.75rem; font-weight: 600; line-height: 1.1; color: #1a1d20; }
.kpi-card .kpi-label { font-size: 0.8rem; color: #6c757d; text-transform: uppercase; letter-spacing: 0.05em; }
.kpi-card .kpi-sub { font-size: 0.85rem; color: #6c757d; }

.kpi-icon.tone-primary { background: #e8f4f5; color: #06565a; }
.kpi-icon.tone-success { background: #e6f5ec; color: #198754; }
.kpi-icon.tone-info    { background: #e0f6fa; color: #0a7d8a; }
.kpi-icon.tone-warning { background: #fff5e0; color: #b8860b; }
.kpi-icon.tone-secondary { background: #eef0f2; color: #495057; }

.kpi-delta { font-size: 0.78rem; font-weight: 600; }
.kpi-delta-up   { color: #198754; }
.kpi-delta-down { color: #dc3545; }
.kpi-delta-flat { color: #6c757d; }

.dash-card {
  border: 1px solid #eef0f2;
  border-radius: 14px;
  background: #fff;
  height: 100%;
}
.dash-card .dash-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f1f3f5;
  display: flex; align-items: center; justify-content: space-between;
}
.dash-card .dash-card-header h6 { margin: 0; font-weight: 600; color: #1a1d20; }
.dash-card .dash-card-body { padding: 0.75rem 1.25rem 1.25rem; }

.chart-wrap { position: relative; height: 280px; }

.activity-item {
  display: flex; gap: 0.75rem; padding: 0.6rem 0;
  border-bottom: 1px solid #f1f3f5;
}
.activity-item:last-child { border-bottom: none; }
.activity-item .act-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.activity-item .act-title { font-weight: 500; font-size: 0.9rem; color: #1a1d20; }
.activity-item .act-sub { font-size: 0.8rem; color: #6c757d; }

.followup-row { padding: 0.6rem 0; border-bottom: 1px solid #f1f3f5; }
.followup-row:last-child { border-bottom: none; }
.age-badge { font-size: 0.72rem; font-weight: 600; }

.empty-state { text-align: center; color: #adb5bd; padding: 1.5rem 0; }
.empty-state i { font-size: 2rem; }