/* style.css */
:root { --ink:#1f2937; --muted:#6b7280; --bg:#f8fafc; --card:#ffffff; --primary:#2563eb; --brand:#96A78D; --accent:#56C596; --accent-2:#43A773; }
/* role themes */
.theme-patient { --brand:#9aa992ff; --bg:#DDF4E7; --accent:#56C596; --accent-2:#43A773; }
.theme-therapist { --brand:#C68EFD; --bg:#e7d3f2ff; --accent:#6c63ff; }
.theme-admin { --brand:#2563eb; --bg:#c6e8fcff; --accent:#2563eb; }
*{box-sizing:border-box} body{margin:0;background:var(--bg, #f8fafc);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto}
header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#fff;border-bottom:1px solid #e5e7eb}
h1{margin:0;font-size:20px} nav a{margin-right:8px;text-decoration:none;color:var(--ink)}
.btn{background:var(--primary);color:#fff;padding:8px 12px;border-radius:8px}
main{max-width:960px;margin:24px auto;padding:0 16px}
.card{background:var(--card);border:1px solid #e5e7eb;border-radius:12px;padding:16px;margin-bottom:16px}
label{display:block;margin:12px 0 6px} input,select,textarea{width:100%;padding:10px;border:1px solid #d1d5db;border-radius:8px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.table{width:100%;border-collapse:collapse} .table th,.table td{border-bottom:1px solid #eee;padding:8px;text-align:left}
.actions a,.actions button{margin-right:6px}
.flash{background:var(--accent);border:1px solid var(--accent-2);padding:10px;border-radius:8px;margin-bottom:12px}
.badge{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--accent-2)}

/* button customized */

.button-mint {
  background-color: var(--accent, #56C596);
  color: #ffffff;
  font-weight: 600;
  padding: 10px 22px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(86, 197, 150, 0.3);
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0.3px;
}

/* Hover effect: richer green gradient with glow */
.button-mint:hover {
  background: linear-gradient(135deg, var(--accent, #56C596), var(--accent-2, #43A773));
  box-shadow: 0 6px 14px rgba(67, 167, 115, 0.4);
  transform: translateY(-2px);
}

/* Active / pressed effect */
.button-mint:active {
  background: linear-gradient(135deg, var(--accent-2, #43A773), var(--accent, #56C596));
  box-shadow: 0 3px 6px rgba(67, 167, 115, 0.3);
  transform: translateY(0);
}

/* Optional: Disabled state */
.button-mint:disabled {
  background: linear-gradient(135deg, #c8e9d6, #a8dcbf);
  color: #f5f5f5;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-therapist {
  background-color: var(--accent, #6c63ff);
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.btn-therapist:hover {
  background-color: #5a52d9;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(108, 99, 255, 0.3);
}

.btn-therapist:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(108, 99, 255, 0.2);
}


 /* Add top padding so page content isn't hidden under fixed-top navbar */
*,
*::before,
*::after {
  box-sizing: border-box;
}

  html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden; /* prevents tiny horizontal scroll */
  background-color: var(--bg, #f8fafc);
}

  /* Ensure full viewport height */
  body {
  min-height: 100vh;
}

header {
  margin: 0;
  padding: 0;
}


  /* Custom Mint Gradient Theme */
.bg-mint {
  /* background: linear-gradient(135deg, #A8E6CF, #56C596); */
  background-color: var(--brand, #96A78D);
  border: none !important;
  box-shadow: 0 2px 6px rgba(86, 197, 150, 0.3);
}

/* Remove default Bootstrap spacing and borders */
.navbar {
  margin: 0 !important;
  padding: 0.75rem 1.5rem;
  border: none !important;
  width: 100%;
}

/* Make navbar occupy the full width and stick to top edge */
.full-width-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw; /* viewport width */
  margin: 0 !important;
  padding: 0.75rem 2rem; /* you can adjust if you want tighter look */
  z-index: 1000;
  border: none !important;
  box-shadow: 0 2px 6px rgba(86, 197, 150, 0.3);
  background-color: var(--brand);
  /* background: linear-gradient(135deg, #A8E6CF, #56C596); */
}

/* Nav link styles */
.navbar .nav-link {
  color: #ffffff !important;
  font-weight: 500;
  transition: color 0.3s ease, background 0.3s ease;
  border-radius: 6px;
  padding: 8px 14px;
}

/* Hover / Active */
.navbar .nav-link:hover,
.navbar .nav-link.active {
  background: rgba(255, 255, 255, 0.25);
  color: #004d40 !important;
}

/* Brand text */
.navbar-brand {
  color: #ffffff !important;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.5px;
}


  /* NAVBAR CONTAINER */
.navbar {
  /* background: linear-gradient(135deg, #A8E6CF, #56C596); */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 30px;
  box-shadow: 0 2px 8px rgba(86, 197, 150, 0.25);
  font-family: 'Poppins', sans-serif;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* BRAND / LOGO */
.navbar .brand {
  color: #ffffff;
  font-weight: 700;
  font-size: 1.4rem;
  text-decoration: none;
  letter-spacing: 0.5px;
}

/* NAV LINKS */
.navbar ul {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
}

.navbar ul li a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

/* HOVER & ACTIVE STATES */
.navbar ul li a:hover,
.navbar ul li a.active {
  background: rgba(255, 255, 255, 0.2);
  color: #004d40;
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.2);
}

    /* Responsive adjustments */
@media (max-width: 768px) {
  .navbar {
    padding: 0.5rem 1rem;
  }
}