:root {
  --bs-primary: #14b8a6;        /* teal */
  --bs-primary-rgb: 20, 184, 166;

  --bs-secondary: #0ea5a4;      /* deeper teal */
  --bs-success: #10b981;

  --bs-body-bg: #f0fdfa;        /* very light teal bg */
  --bs-body-color: #0f172a;

  --app-gradient: linear-gradient(135deg, #14b8a6, #0ea5a4);
}

body {
  padding-top: 70px;
}

/* Buttons */
.btn-primary {
  background: var(--app-gradient);
  border: none;
}

.btn-primary:hover {
  filter: brightness(0.95);
}

/* Card */
.card {
  border: none;
  border-radius: 12px;
}

/* Inputs */
.form-control:focus {
  border-color: #14b8a6;
  box-shadow: 0 0 0 0.2rem rgba(20, 184, 166, 0.25);
}

/* Links */
a {
  color: #0ea5a4;
}

/* Login card special */
.auth-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border-radius: 16px;
}

/* Background gradient */
.bg-app {
  background: linear-gradient(135deg, #ccfbf1, #99f6e4);
}

.navbar {
  background: var(--app-gradient);
}

.navbar .nav-link,
.navbar-brand {
  color: white !important;
}

/* Active */
.gsm-active {
  border-left: 4px solid #198754; /* Bootstrap success */
}

/* Inactive */
.gsm-inactive {
  border-left: 4px solid #dc3545; /* Bootstrap danger */
  opacity: 0.3;
}

.filter-btn.active {
  font-weight: bold;
}