/* ===== Root Variables ===== */
:root {
  --tulip-dark-blue: #2f5d87;
  --tulip-teal: #26a6a6;
  --tulip-light-gray: #f9fbfc;
  --tulip-accent: #5bc0be;
  --tulip-bg-light: linear-gradient(to bottom, #e9f7f9 0%, #cdeff2 100%);
  --tulip-bg-dark: linear-gradient(to bottom, #b7d9ec 0%, #6fb7d6 100%);
}

/* ===== Base Body ===== */
html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: 'Segoe UI', sans-serif;
  color: #333;
  background: linear-gradient(to bottom, #f9fefd 0%, #bde9f1 100%) no-repeat center center fixed;
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Animated gradient keyframes */
@keyframes gradientBG {
  0% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}

/* ===== Page-specific backgrounds (optional) ===== */
body.prepos-stakeholders {
  background: var(--tulip-bg-dark) no-repeat center center fixed;
  background-size: cover;
}

body.prepos-researchers {
  background: var(--tulip-bg-light) no-repeat center center fixed;
  background-size: cover;
}

/* ===== Particle container ===== */
#particles-js {
  position: fixed;
  top:0; left:0; width:100%; height:100%;
  z-index:0;
}

/* ===== Logo ===== */
.logo {
  max-width: 150px;
  margin: 30px auto;
  display: block;
  z-index:1;
  position: relative;
}

/* ===== Navbar ===== */
.navbar {
  background-color: var(--tulip-dark-blue);
}

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

.nav-link:hover,
.dropdown-item:hover {
  color: var(--tulip-accent) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Dropdown menu */
.dropdown-menu {
  background-color: #3f6f96 !important;
  border-radius: 0.5rem;
  border: none;
}

.dropdown-item {
  color: #f1f1f1 !important;
}

.dropdown-item:hover {
  background-color: #4f80a7 !important;
  color: var(--tulip-accent) !important;
}

/* ===== Hero Section ===== */
.hero {
  background: linear-gradient(135deg, var(--tulip-dark-blue), var(--tulip-teal));
  color: white;
  padding: 1.5rem;
  text-align: center;
  border-radius: 0 0 1rem 1rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.hero h1 {
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* ===== Section Container ===== */
.section-container {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 30px;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.section-container .header {
  background: linear-gradient(90deg, var(--tulip-dark-blue), var(--tulip-teal));
  color: white;
  padding: 4px 20px;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  margin: -20px -20px 0 -20px;
  user-select: none;
}

.section-container .header h3,
.section-container .header h5 {
  margin: 0;
  font-weight: 700;
}

.section-container .header h3 { font-size: 1.1rem; }
.section-container .header h5 { font-size: 0.9rem; }

.sub-header {
  background-color: #004c4c;
  padding: 8px 24px;
  margin: 0 -20px 12px -20px;
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  letter-spacing: 0.5px;
}

/* ===== Form Input Placeholders ===== */
input::placeholder,
textarea::placeholder {
  color: #aaa !important;
  opacity: 1 !important;
}

/* ===== Toggle Switch (Large) ===== */
.switch-large .form-check-input {
  width: 3.5rem;
  height: 2rem;
  transform: scale(1.5);
  margin-top: 0.25rem;
}

/* ===== Smiley Scale ===== */
.smiley-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.smiley-option {
  flex: 0 1 120px;
  text-align: center;
  cursor: pointer;
  padding: 12px;
  border: 2px solid #dee2e6;
  border-radius: 12px;
  transition: all 0.25s ease-in-out;
  background: transparent;
}

.smiley-option:hover {
  border-color: #0d6efd;
  background: #e9f3ff;
}

.smiley-option.selected[data-value="1"] { border-color: #dc3545; background: #f8d7da; color: #842029; font-weight: bold; }
.smiley-option.selected[data-value="2"] { border-color: #fd7e14; background: #ffe5d0; color: #7f3d00; }
.smiley-option.selected[data-value="3"] { border-color: #ffc107; background: #fff3cd; color: #856404; }
.smiley-option.selected[data-value="4"] { border-color: #28a745; background: #d4edda; color: #155724; }
.smiley-option.selected[data-value="5"] { border-color: #198754; background: #d1e7dd; color: #0f5132; font-weight: bold; }
.smiley-option.selected[data-value="6"] { border-color: #adb5bd; background: #f8f9fa; color: #495057; font-style: italic; }

.smiley-option .emoji { font-size: 1.8rem; display: block; margin-bottom: 4px; }
.smiley-option small { display: block; font-size: 0.85rem; }

@keyframes bounceAnim {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.3); }
  60% { transform: scale(0.9); }
}
.bounce { animation: bounceAnim 0.4s ease; }

.orange-emoji { color: orange; font-size: 2rem; }

/* ===== Buttons ===== */
.btn-stakeholders {
  background-color: #28a745;
  color: #fff;
}
.btn-stakeholders:hover { background-color: #218838; }

.btn-researchers {
  background-color: #007bff;
  color: #fff;
}
.btn-researchers:hover { background-color: #0069d9; }

/* ===== Card animation and hover ===== */
/* Instead of animating all .card by default */
.card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  /* Remove opacity & transform here */
  /* opacity: 0;
  transform: translateY(20px); */
  transition: all 0.6s ease;
  position: relative; 
  z-index: 1;
}
.card.show {
  opacity: 1;
  transform: translateY(0);
}
.card:hover {
  transform: translateY(-5px);
  transition: transform 0.3s ease;
}

/* ===== Modal animation ===== */
.modal.fade .modal-dialog {
  transform: translateY(-50px);
  transition: transform 0.5s ease-out;
}
.modal.show .modal-dialog {
  transform: translateY(0);
}

/* ===== Form tweaks ===== */
.form-switch .form-check-input { cursor: pointer; }
#passwordRequirements li { font-size: 0.85rem; list-style: none; }

/* ===== Sticky Footer ===== */
footer {
  background-color: var(--tulip-dark-blue);
  color: white;
  padding: 1rem 0;
  text-align: center;
  font-size: 0.9rem;
  margin-top: auto;
}

/* ===== DataTable visibility fix ===== */
#samplesTable_wrapper {
  position: relative;
  z-index: 2;
}

#samplesTable_wrapper .card {
  opacity: 1 !important;
  transform: none !important;
}








    .sticky-lock-btn {
      position: fixed;
      right: 20px;
      bottom: 40px;
      width: 55px;
      height: 55px;
      background-color: #0077B6;
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      cursor: pointer;
      z-index: 9999;
      box-shadow: 0 6px 20px rgba(0,0,0,0.3);
      transition: transform 0.2s ease, box-shadow 0.3s ease;
    }
    .sticky-lock-btn:hover {
      transform: scale(1.1);
      box-shadow: 0 8px 25px rgba(0,0,0,0.4);
    }
    
    
    
    
.sticky-home-btn {
      position: fixed;
      right: 20px;
      bottom: 40px;
      width: 55px;
      height: 55px;
      background-color: #0077B6;
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      cursor: pointer;
      z-index: 9999;
      box-shadow: 0 6px 20px rgba(0,0,0,0.3);
      transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.sticky-home-btn:hover {
      transform: scale(1.1);
      box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}   
    
    
    
/* NEW Logout Sticky Button */
.sticky-logout-btn {
    position: fixed;
    right: 20px;
    bottom: 110px; /* placed above the home button */
    width: 55px;
    height: 55px;
    background-color: #d9534f; /* logout = red */
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.sticky-logout-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(0,0,0,0.45);
}