/* =========================================
   Variables & Resets
   ========================================= */
:root {
  --dark-teal: #084c41;
  --dark-teal-light: #0d6e5f;
  --bright-green: #10a342;
  --bright-green-hover: #0c8a36;
  --light-gray-bg: #f4f5f7;
}

body {
  font-family:
    "Segoe UI",
    system-ui,
    -apple-system,
    sans-serif;
}
.bg-teal {
  background-color: var(--dark-teal) !important;
}
.text-teal {
  color: var(--dark-teal) !important;
}
.bg-light-gray {
  background-color: var(--light-gray-bg) !important;
}
.btn-green {
  background-color: var(--bright-green);
  border-color: var(--bright-green);
  color: white;
}
.btn-green:hover {
  background-color: var(--bright-green-hover);
  border-color: var(--bright-green-hover);
  color: white;
}

/* =========================================
   Sidebar Styling
   ========================================= */
.sidebar {
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.avatar {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.2);
}

.custom-nav .nav-link {
  color: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  transition: all 0.2s ease;
}

.custom-nav .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.custom-nav .nav-link.active {
  background-color: var(--dark-teal-light);
  color: white;
  border-left: 4px solid var(--bright-green);
  border-radius: 0 6px 6px 0;
}

.logout-link:hover {
  color: #ff6b6b !important;
  background-color: rgba(255, 107, 107, 0.1);
}

/* =========================================
   Form Elements
   ========================================= */
.form-card {
  border-radius: 8px;
  overflow: hidden;
}

.custom-input {
  border-radius: 4px;
  border: 1px solid #ced4da;
  padding: 0.6rem 0.75rem;
  background-color: #fcfcfc;
}

.custom-input:focus {
  border-color: var(--dark-teal);
  box-shadow: 0 0 0 0.2rem rgba(8, 76, 65, 0.15);
  background-color: #fff;
}