/* ─── Theme Variables ─────────────────────────────── */
:root {
  --wa-green: #25D366;
  --wa-dark-green: #128C7E;
  --wa-teal: #075E54;
  --wa-light: #DCF8C6;
  --sidebar-width: 220px;
}

[data-bs-theme="dark"] {
  --wa-light: #1a3a2a;
}

/* ─── Layout ─────────────────────────────────────── */
body {
  padding-top: 56px;
}

#sidebar {
  position: fixed;
  top: 56px;
  bottom: 0;
  left: 0;
  z-index: 100;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid var(--bs-border-color);
  width: var(--sidebar-width);
}

#sidebar .nav-link {
  padding: 0.65rem 1rem;
  color: var(--bs-body-color);
  border-radius: 0;
  transition: all 0.2s;
}

#sidebar .nav-link:hover {
  background-color: var(--bs-tertiary-bg);
}

#sidebar .nav-link.active {
  background-color: var(--wa-dark-green);
  color: white;
}

main {
  margin-left: var(--sidebar-width);
}

/* ─── Cards ──────────────────────────────────────── */
.stat-card {
  border-left: 4px solid var(--wa-green);
  transition: transform 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-card .stat-number {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--wa-dark-green);
}

/* ─── Status Badges ──────────────────────────────── */
.badge-pending { background-color: #6c757d; }
.badge-sent { background-color: #0d6efd; }
.badge-delivered { background-color: #198754; }
.badge-read { background-color: #0dcaf0; color: #000; }
.badge-failed { background-color: #dc3545; }

.badge-APPROVED { background-color: #198754; }
.badge-PENDING { background-color: #ffc107; color: #000; }
.badge-REJECTED { background-color: #dc3545; }
.badge-PAUSED { background-color: #6c757d; }
.badge-IN_REVIEW { background-color: #0d6efd; }
.badge-DISABLED { background-color: #6c757d; }

/* ─── Tables ─────────────────────────────────────── */
.table th {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.table-hover tbody tr {
  cursor: pointer;
}

/* ─── Responsive ─────────────────────────────────── */
@media (max-width: 767.98px) {
  #sidebar {
    position: static;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--bs-border-color);
  }

  main {
    margin-left: 0;
  }
}