/* === UNIVERSAL RESET === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
/* === FRONT PAGE ISOLATED STYLES === */
#front-page {
  background: #f4f7fb;
  color: #333;
  line-height: 1.6;
  font-family: "Poppins", sans-serif;
}

/* --- Header/Nav --- */
#front-page header {
  background: #1e88e5;
  color: white;
  padding: 15px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

#front-page header .logo {
  font-size: 22px;
  font-weight: bold;
}

#front-page nav {
  background: white;
  padding: 8px 20px;
  border-radius: 25px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

#front-page nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

#front-page nav ul li a {
  color: #1e88e5;
  text-decoration: none;
  font-size: 16px;
  padding: 6px 14px;
  border-radius: 10px;
  transition: 0.3s;
  font-weight: 500;
  display: inline-block;
}

#front-page nav ul li a:hover {
  background: #1e88e5;
  color: white;
}

/* --- Hero Section --- */
#front-page .hero {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 40px 40px;
  background: white;
  flex-wrap: wrap;
}

#front-page .hero-text {
  max-width: 500px;
}

#front-page .hero-text h1 {
  font-size: 40px;
  margin-bottom: 20px;
  color: #1e88e5;
}

#front-page .hero-text p {
  font-size: 18px;
  margin-bottom: 20px;
}

#front-page .hero-text button {
  padding: 12px 25px;
  font-size: 16px;
  background: #1e88e5;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}


#front-page .hero img {
  max-width: 420px;
  border-radius: 10px;
  margin-top: 20px;
}

/* --- Features Section --- */
#front-page section.features {
  padding: 80px 40px;
  text-align: center;
  background: #f9fbfd;
}

#front-page .features h2 {
  font-size: 32px;
  margin-bottom: 30px;
  color: #1e88e5;
}

#front-page .feature-list {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

#front-page .feature {
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  max-width: 300px;
  transition: transform 0.3s;
}

#front-page .feature:hover {
  transform: translateY(-8px);
}

/* --- Forms --- */
#front-page form {
  max-width: 400px;
  margin: 0 auto;
}

#front-page form input {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
}

#front-page form button {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  background: #1e88e5;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

#front-page form button:hover {
  background: #1565c0;
}

/* --- Footer --- */
#front-page footer {
  text-align: center;
  background: #1e88e5;
  color: white;
  padding: 20px;
  margin-top: 40px;
}


/* ===== Modal Styling ===== */
#front-page .modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3); 
  justify-content: center;
  align-items: center;
}

#front-page .modal-content {
  background: white;
  width: 500px;
  height: 650px;
  margin-top:10px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  position: relative;
}

#front-page .close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
}

/* ✨ Fix modal form layout */
#front-page .modal .form-box {
    max-width: 350px;
    max-height: 100vh;
    margin: auto;
    padding: 20px;
}

/* ✅ Make inputs equal width */
#front-page .modal input, 
#front-page .modal select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 12px;
}

/* ✅ Fix password field & eye button alignment */
#front-page .password-wrapper {
    position: relative;
    width: 100%;
}

#front-page .password-wrapper input {
    width: 100%;
    padding-right: 40px; /* space for eye icon */
}

#front-page .password-wrapper button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    cursor: pointer;
    font-size: 16px;
}

/* ✅ Better spacing for checkbox */
#front-page .terms {
    display: flex;
    align-items: center;
    margin: 10px 0;
}

#front-page .terms input {
    margin-right: 8px;
}

/* ✅ Buttons aligned & smaller */
#front-page .buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

#front-page .buttons button {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

#front-page .modal button:hover {
    background-color: inherit; /* keep your modal button color */
    color: #f197c2; /* or whatever your design is */
}



/* === 📱 Mobile Responsive Fix === */
@media screen and (max-width: 768px) {

  /* HEADER */
  #front-page header {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 15px;
    gap: 8px;
  }

  #front-page header .logo {
    font-size: 18px;
    margin-bottom: 5px;
  }
 
  /* NAVIGATION */
  #front-page nav {
    width: 100%;
    padding: 8px 10px;
    background: white;
    border-radius: 20px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none; /* hide scrollbar on Firefox */
  }

  #front-page nav::-webkit-scrollbar {
    display: none; /* hide scrollbar on Chrome/Safari */
  }

  #front-page nav ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: max-content;
    margin: 0 auto;
  }

  #front-page nav ul li {
    display: inline-block;
  }

  #front-page nav ul li a {
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 8px;
  }

  /* HERO SECTION */
  #front-page .hero {
    flex-direction: column;
    text-align: center;
    padding: 40px 20px;
  }

  #front-page .hero-text h1 {
    font-size: 28px;
  }

  #front-page .hero-text p {
    font-size: 16px;
  }

  #front-page .hero img {
    max-width: 250px;
    margin-top: 15px;
  }
   /* Resize the modal box */
  #front-page .modal-content {
    width: 90% !important;
    max-width: 380px;
    height: auto !important;
    max-height: 90vh;
    padding: 20px;
    overflow-y: auto;
  }

  /* Make form fit nicely inside */
  #front-page .modal .form-box,
  #front-page .modal .form-section {
    max-width: 100%;
    padding: 10px;
  }

  /* Resize inputs and text */
  #front-page .modal input,
  #front-page .modal select,
  #front-page .modal button {
    font-size: 14px;
    padding: 10px;
  }
    /* Terms Modal Styles */
#front-page .terms-content {
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
}

#front-page .terms-text {
    text-align: left;
    margin: 20px 0;
    line-height: 1.6;
}

#front-page .terms-text h3 {
    color: #007bff;
    margin: 15px 0 8px 0;
    font-size: 16px;
}

#front-page .terms-text p {
    margin-bottom: 15px;
    font-size: 14px;
    color: #555;
}

#front-page .agree-btn {
    background: #28a745;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 15px;
}

#front-page .agree-btn:hover {
    background: #218838;
}

/* Make the terms label clickable */
#front-page .terms label span {
    cursor: pointer;
    color: #007bff;
    text-decoration: underline;
}

#front-page .terms label span:hover {
    color: #0056b3;
}
  #front-page .terms {
    border-top: 1px solid #e0e0e0;
    padding-top: 15px;
    margin-top: 15px;
    position: relative;
}

#front-page.terms::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e0e0e0, transparent);
}
}











/* === LOGIN PAGE === */
#login-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#login-page .container {
  width: 400px;
   height: 650px;    
  max-width: 100%;
  padding: 25px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
   margin: auto;
}


#login-page .form-section {
  flex: 1;
  padding: 20px 10px;
}

#login-page .form-section h2 {
  color: #333;
  font-weight: 600;
  margin-bottom: 10px;
}

#login-page .form-section p {
  margin-bottom: 25px;
  color: #666;
}

#login-page .form-group {
  margin-bottom: 12px;
}

#login-page .form-group input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid hsl(0, 0%, 80%);
  border-radius: 8px;
}

#login-page .form-group label {
  font-size: 14px;
  margin-bottom: 5px;
  display: block;
}


/* Password group wrapper */
#login-page .password-group {
  position: relative;
}

/* Password input → give space for icon */
#login-page .password-group input {
  width: 100%;
  padding: 12px 40px 12px 15px; /* extra right padding */
  border: 1px solid hsl(0, 0%, 80%);
  border-radius: 8px;
}

/* Eye icon */
#login-page .toggle-password {
  position: absolute;
  right: 12px;
  top: 40%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 18px;
  color: #666;
}
#login-page .toggle-password:hover {
  color: #f197c2;
}

#login-page .role {
  width: 100%;
  margin-bottom: 20px;
  text-align: left;
}

#login-page .role select {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid hsl(0, 0%, 80%);
  border-radius: 8px;
  font-size: 14px;
}

#login-page .forgot {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #888;
}

#login-page .btn {
  width: 100%;
  padding: 10px;
  background-color: #f197c2;
  border: none;
  color: white;
  border-radius: 8px;
  font-size: 15px;
  margin-top: 10px;
  cursor: pointer;
}

#login-page .or {
  text-align: center;
  margin: 20px 0;
  color: #999;
}

#login-page .social-login {
  display: flex;
  justify-content: space-between;
}

#login-page .social-login button {
  flex: 1;
  margin: 0 5px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: white;
  cursor: pointer;
}

#login-page .signup {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
}

#login-page .signup a {
  color: #f197c2;
  text-decoration: none;
  font-weight: bold;
}
#login-page .signup a:hover {
  text-decoration: underline;
}


@media (max-width: 768px) {
  #login-page .container {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    position: relative;
    padding-top: 0px; /* space for fixed doctor logo */
  }

  /* Center logo, welcome text, and Log In heading */
  #login-page .form-section img,
  #login-page .form-section p,
  #login-page .form-section h2 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  #login-page .form-section p,
  #login-page .form-section h2 {
    margin-bottom: 20px;
  }

  /* Inputs and role select remain left-aligned */
  #login-page .role,
  #login-page .form-group {
    width: 100%;
  }

  /* Signup text centered and wrapped nicely */
  #login-page .signup {
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 15px;
    font-size: 14px;
  }

  #login-page .signup a {
    display: inline-block;
    font-weight: bold;
    color: #f197c2;
    text-decoration: none;
  }

  #login-page .signup a:hover {
    text-decoration: underline;
  }
}
/* Mobile adjustments for signup text */

  #login-page .signup {
    text-align: center;       /* center the whole line */
    white-space: normal;      /* allow wrapping naturally */
    display: flex;            /* use flex for proper inline alignment */
    justify-content: center;  /* center the content horizontally */
    flex-wrap: wrap;          /* allow wrapping on small screens */
    margin-top: 15px;
    font-size: 14px;
    gap: 5px;                 /* spacing between text and link */
  }

  #login-page .signup a {
    display: inline-block;    /* keeps link aligned with text */
    font-weight: bold;
    color: #f197c2;
    text-decoration: none;
  }



  
#login-page .role {
  width: 100%;
  margin-bottom: 20px;
  text-align: left;
}

#login-page .role select {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid hwb(0 94% 5%);
  border-radius: 8px;
  font-size: 14px;
}

@media (min-width: 769px) {
  /* 🔹 Login page */
  #login-page .container {
    display: flex;
    flex-direction: row; /* side by side */
    justify-content: center;
    align-items: center;
    gap: 20px;
  }
}







/* === SIGNUP PAGE === */
#signup-page {
  background: transparent;
  display: block;
 
  min-height: auto;
  padding: 0; /* Prevent form sticking to screen edges */

}

#signup-page .container {
   width: 400px;    
   height: 650px;          /* ✅ Much smaller form */
  max-width: 100%;
  padding: 25px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  margin: auto;              /* Centers it if needed */
}

#signup-page .form-box {
 padding: 0;
}

#signup-page .header {
  text-align: left;
  margin-bottom: 20px;
}

#signup-page .logo {
  width: 100px;
  height: 100px;
}

#signup-page h1 {
  font-size: 28px;
  margin-top: 10px;
}

#signup-page h2 {
  font-weight: normal;
  font-size: 20px;
  margin-top: 10px;
}

#signup-page form {
  display: flex;
  flex-direction: column;
}

input[type="text"] { text-transform: capitalize; }
input[type="email"] { text-transform: none; }


#signup-page .password-wrapper {
  position: relative;
  margin-bottom: 15px;
}

#signup-page .password-wrapper input {
  width: 100%;
  padding: 12px;
  padding-right: 45px; /* space for button */
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 14px;
}

#signup-page .password-wrapper button {
  position: absolute;
  top: 25px;
  right: 15px;
  width: 10px;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #555;
}

#signup-page .row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  align-items: center;
}

#signup-page .row input,
#signup-page .row select {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

#signup-page .terms {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin: 20px 0;
}

#signup-page .terms label {
  display: flex;
  align-items: center;
  gap: 6px;
}

#signup-page .terms span {
  white-space: nowrap;
  line-height: 1;
}

#signup-page .buttons {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* add spacing between buttons */
  margin-top: 20px; /* add spacing from fields above */
}

#signup-page .signup,
#signup-page .exit {
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  flex: 1; /* take equal width on mobile */

}

#signup-page .signup {
  background-color: #e461cc;
  color: #fff;
}

#signup-page .exit {
  background-color: #5c6bc0;
  color: #fff;
}

/* 🚫 Hide browser's default password reveal button */
input::-ms-reveal,
input::-ms-clear {
  display: none;
}

input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-clear-button,
input[type="password"]::-webkit-reveal {
  display: none !important;
  visibility: hidden;
}



@media (min-width: 769px) {

  /* 🔹 Signup page */
  #signup-page .container {
    display: flex;
    flex-direction: row; /* side by side */
    justify-content: center;
    align-items: center;
    gap: 20px;
  }
  
 }


@media (max-width: 768px) {
  #signup-page .container {
    flex-direction: column; /* stack vertically */
  }

  #signup-page .form-box {
    padding: 20px; /* less padding on small screens */
  }

  #signup-page .row {
    flex-direction: column; /* stack inputs */
  }

  #signup-page .row input,
  #signup-page .row select {
    width: 100%;
  }

  #signup-page .buttons {
    flex-direction: column;
    gap: 15px; /* vertical gap for stacked buttons */
  }

  #signup-page .signup,
  #signup-page .exit {
    width: 100%;
  }

  #signup-page h1 {
    font-size: 22px;
  }

  #signup-page h2 {
    font-size: 16px;
  }
  /* Fake placeholder for date input */
#signup-page input[type="date"] {
  position: relative;
}

#signup-page input[type="date"]::before {
  content: attr(data-placeholder);
  color: hsla(0, 0%, 1%, 0.893);
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Hide the pseudo-placeholder when a date is selected */
#signup-page input[type="date"]:valid::before {
  content: "";
}

}
















/* === ADMIN MAIN PAGE === */
#admin-page {
  background: #8ab6f8;
  min-height: 100vh;
  display: flex;
  font-family: "Poppins", sans-serif;
}

/* Container holds sidebar + content */
#admin-page .container {
  display: flex;
  flex: 1;
  position: relative;
}


/* Sidebar */
#admin-page .sidebar {
  width: 250px;
  background: #ffffff;
  color: #333;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.08);
  height: 100vh;
  transition: left 0.3s ease;
  position: fixed;
  top: 0;
  left: -100%; /* hidden by default */
  z-index: 1000;
}
#admin-page .sidebar.active {
  left: 0;
}

/* Profile circle */
#admin-page .profile-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, #007bff, #66ccff);
  margin-top: 25px;
  margin-bottom: 30px;
}

/* Sidebar navigation */
#admin-page .nav {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 60px;
}

#admin-page .nav li {
  padding: 12px 15px;
  margin-bottom: 10px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

#admin-page .nav li:hover {
  background: #e6f2ff;
  color: #007bff;
}

#admin-page .nav li.active {
  background: #007bff;
  color: #fff;
}

/* Main content */
#admin-page .main-content {
  flex: 1;
  padding: 40px;
  margin-left: 250px; /* prevent overlap with sidebar on desktop */
  transition: margin-left 0.3s ease;
  overflow: visible;

}

#admin-page .main-content h1 {
  font-size: 2rem;
  margin-left: 0;
  margin-bottom: 10px;
  color: #222;
}

#admin-page .subtitle {
  font-size: 1rem;
  color: #666;
  margin-bottom: 30px;
}

/* Cards */
#admin-page .cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

#admin-page .card {
  flex: 1;
  min-width: 260px;
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

#admin-page .card:hover {
  transform: translateY(-3px);
}

#admin-page .card-icon {
  font-size: 2rem;
  color: #007bff;
  margin-right: 15px;
}

#admin-page .card-info h3 {
  font-size: 1rem;
  margin-bottom: 5px;
  color: #333;
}

#admin-page .card-info p {
  font-size: 0.9rem;
  color: #666;
}

#admin-page .card-info strong {
  color: #111;
}

/* DataGrid Style */
#admin-page .datagrid {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  font-size: 0.95em;
  border: 1px solid #ddd;
}
#admin-page .datagrid td {
  background: #fff; /* all cells default white */
}

/* Keep alternating row striping */
#admin-page .datagrid tr:nth-child(even) td {
  background: #f9f9fb;
}


#admin-page .datagrid th, 
#admin-page .datagrid td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

#admin-page .datagrid th {
  background: #4f46e5; /* Indigo header */
  color: #fff;
  cursor: pointer;
}
#admin-page .datagrid tr {
  background: #ffffff;   /* odd rows (default) */
}

#admin-page .datagrid tr:nth-child(even)  {
  background:   #f9f9fb;
}

#admin-page .datagrid tr:hover {
  background: #eef2ff;
}

#admin-page .status {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.85em;
  font-weight: bold;
  color: #070707;
}

#admin-page .datagrid td .status {
  display: block;       /* fill the cell */
  width: 100%;          /* stretch to full width of <td> */
  text-align: center;   /* center the text */
  padding: 6px 0;
  border-radius: 6px;
  font-size: 0.85em;
  font-weight: bold;

}

#admin-page .status.pending { background: #f59e0b; }
#admin-page .status.approved { background: #10b981; }
#admin-page .status.cancelled { background: #ef4444; }


/* === USER MANAGEMENT TABLE === */
#admin-page .user-management {
  margin-top: 20px;
  width: 100%;
  overflow-x: auto; /* horizontal scroll on small screens */
}

#admin-page #userTable {
  width: 100%;
  min-width: 1200px; /* prevents column collapse */
  border-collapse: collapse;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

#admin-page #userTable th,
#admin-page #userTable td {
  padding: 12px 15px;
  text-align: left;
  white-space: nowrap; /* prevent text wrap */
}

#admin-page #userTable th {
  background: #4f46e5;
  color: #fff;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background 0.3s;
}

#admin-page #userTable th:hover {
  background: #0056b3;
}

#admin-page #userTable tr:nth-child(even) {
  background: #f7f9ff;
}

/* Sorting arrows */
#admin-page #userTable th.asc::after {
  content: " ▲";
  font-size: 12px;
}
#admin-page #userTable th.desc::after {
  content: " ▼";
  font-size: 12px;
}

/* === SEARCH + FILTER ROW === */
#admin-page .search-bar {
  display: flex;
  align-items: center;   /* vertically aligned */
  gap: 10px;             /* space between search & filter */
  margin-bottom: 20px;
}

#admin-page .search-bar #searchInput,
#admin-page .search-bar #filterType {
  height: 40px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.4;
  box-sizing: border-box;
}

#admin-page .search-bar #searchInput {
  flex: 1;          /* search bar stretches */
  max-width: 400px;
  margin-bottom: 0;
}

#admin-page .search-bar #filterType {
  width: 160px;     /* dropdown fixed width */
}


/* Sections hidden by default */
#admin-page .content-section {
  display: none;
}
#admin-page .content-section.active {
  display: block;
}


/* Profile box */
#admin-page .profile-box {
  background: #fff;

  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  max-width: 500px;
  margin: 20px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  box-sizing: border-box;

}

#admin-page .profile-box form {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columns */
  gap: 20px; /* space between items */
  width: 1100px;
}

#admin-page #profile-buttons button {
  padding: 10px 30px;
  margin-top: 20px;
  border: none;
  border-radius: 6px;
  background: #448afa;
  color: white;
}

/* Profile box labels & inputs */
#admin-page .profile-box label {
  font-size: 14px;
  margin-bottom: 4px;
  display: block;
}
#admin-page .profile-box input,
#admin-page .profile-box select {
  padding: 10px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  width: 100%;
  box-sizing: border-box;
}

/* Hamburger */
#admin-page .hamburger {
  display: none;
  position: fixed;
  top: 15px;
  left: 15px;
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
   color: #e90ea4 !important;
  z-index: 1600;
}

#admin-page .sidebar.active ~ .hamburger {
  left: 230px; /* matches sidebar width */
}

/* Overlay */
#admin-page .overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 900;
}
#admin-page .overlay.active {
  display: block;
}


/* === TOP HEADER === */
#admin-page .top-header {
  position: fixed;
  top: 0;
  left: 250px; /* same as your sidebar width */
  width: calc(100% - 250px); /* occupy remaining space */
  height: 100px;
  background: linear-gradient(135deg, #007bff, #66ccff);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}


#admin-page .top-header h2 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
}

#admin-page .top-header .header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

#admin-page .top-header .welcome-text {
  font-weight: 500;
  font-size: 0.95rem;
   margin-left: 40px;    
}

#admin-page .top-header button {
  background: #fff;
  color: #007bff;
  border: none;
  border-radius: 6px;
  padding: 8px 15px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: 0.3s ease;
}

#admin-page .top-header button:hover {
  background: #e6f2ff;
  color: #0056b3;
}

/* Adjust spacing since header is fixed */
#admin-page .container {
  margin-top: 100px;
}
   
#admin-page .status {
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  display: inline-block;
}

#admin-page .status.active {
  color: #10b981;          /* green text */
  background-color: #d1fae5; /* light green background */
}

#admin-page .status.offline {
  color: #ef4444;          /* red text */
  background-color: #fee2e2; /* light red background */
}

/* === FIX: Align chart header & filter properly === */
#admin-page .chart-header {
  display: flex;
  justify-content: space-between; /* Spread title and filter evenly */
  align-items: center;            /* Align vertically centered */
  margin-bottom: 10px;
  flex-wrap: wrap;                /* Prevent overlap on smaller screens */
  gap: 10px;
  
}

#admin-page .chart-header h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #0b1741;
  font-weight: 600;
}

#admin-page #yearFilter {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-family: "Poppins", sans-serif;
  font-size: 0.95rem;
  background: #fff;
  cursor: pointer;
   position: relative;  /* ADD THIS */  
  width: 40;     /* ADD THIS: higher than header/sidebar */
}

/* === FIX: Prevent tall chart stretching === */
#admin-page .chart-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  margin-top: 20px;
  overflow: visible;
  position: relative;

}

#admin-page .chart-card canvas {
  width: 100% !important;
  height: 350px !important; /* limit height on desktop */
}

/* Highlighted rows for selected filters */
#admin-page .datagrid tr.highlight {
  background: linear-gradient(90deg, #dbeafe, #eff6ff);
  transition: background 0.3s ease;
}

#admin-page .datagrid tr.highlight:hover {
  background: linear-gradient(90deg, #bfdbfe, #dbeafe);
}


/* === REPORT FILTER BAR === */
#admin-page .filter-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 15px;
  background: #ffffff;
  padding: 12px 15px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

#admin-page .filter-group select,
#admin-page .filter-group input[type="date"],
#admin-page .filter-group input[type="month"] {
  height: 42px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-family: "Poppins", sans-serif;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  background: #f9fafb;
  color: #333;
  box-sizing: border-box;
}


#admin-page .filter-group select:focus,
#admin-page .filter-group input[type="date"]:focus {
  border-color: #007bff;
  box-shadow: 0 0 4px rgba(0, 123, 255, 0.4);
}

/* === Buttons === */
#admin-page .filter-group button {
  background: linear-gradient(135deg, #007bff, #66ccff);
  color: white;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
}

#admin-page .filter-group button:hover {
  background: linear-gradient(135deg, #0056b3, #0099ff);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 123, 255, 0.4);
}

/* Print button — green */
#admin-page .filter-group button[type="button"] {
  background: linear-gradient(135deg, #10b981, #34d399);
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}

#admin-page .filter-group button[type="button"]:hover {
  background: linear-gradient(135deg, #059669, #34d399);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(16, 185, 129, 0.4);
}





/* === RESPONSIVE === */
@media (max-width: 768px) {
  #admin-page .main-content {
    margin-left: 0;
    padding: 20px 20px 20px 30px;  /* top | right | bottom | left */

  }

  #admin-page .cards {
    flex-direction: column;
  }

  #admin-page .hamburger {
    display: block;
    
    
  }

 #admin-page #userTable {
    min-width: 500px; /* smaller screen minimum */
  }

  /* Profile box on mobile (1 column) */
  #admin-page .profile-box {
    max-width: 100%;
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
 #admin-page .top-header {
    position: fixed;
    top: 0;
    left: 0; /* ✅ reset the offset */
    width: 100%; /* ✅ full width */
    height: auto;
    padding: 15px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #007bff, #66ccff);
    text-align: center;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    text-align: center;
    gap: 20px; /* space between centered text and any other elements */
}

  #admin-page .top-header h2 {
    font-size: 1rem;
    margin-bottom: 4px;
    flex-grow: 1; /* ✅ allows it to take space and avoid overlap */
    text-align: center; /* centers it when possible */
     pointer-events: none;
  }

  #admin-page .top-header .welcome-text {
    margin-left: 0;
    font-size: 1rem; /* ✅ smaller welcome text */
    font-weight: 500;
  }
  
   #admin-page .chart-header {
    flex-direction: column; /* stack text and filter */
    align-items: flex-start;
    gap: 6px;
  }

  #admin-page .top-header .header-right {
  position: absolute;
  right: 20px; /* fixed to right, won't overlap */
  display: flex;
  align-items: center;
  gap: 15px;
  }
  #admin-page .chart-card canvas {
    height: 220px !important; /* smaller on mobile */
  }

  #admin-page #yearFilter {
    width: 40%;
  }
  
}


@media (min-width: 769px) {
  #admin-page .sidebar {
    left: 0;
    width: 250px;
    padding: 20px;
  }

  #admin-page .main-content {
    margin-left: 250px;
    padding: 20px;
  }

  /* Profile Box on Desktop (2 columns) */
  #admin-page .profile-box {
    max-width: 1200px;
    width: 100%;
    margin: 20px auto;
    padding:  30px 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 40px;
   background: #dbeafe;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }

  #admin-page .top-header {
    justify-content: flex-start;   /* align items to left */
    padding-left: 30px;            /* add some spacing from sidebar */
    text-align: left;              /* align text inside */
  }

  #admin-page .top-header h2 {
    text-align: left;              /* left-align the title */
  }

  #admin-page .top-header .welcome-text {
    margin-left: auto;             /* push right section to the right */
  }

  #admin-page .chart-card {
    height: 450px; 
    width: 800px; /* wider chart container */
    margin: 10px;    /* center it horizontally */
    padding: 30px;  
          /* add more breathing space */
  }

  #admin-page .chart-header{
    position: top;
  }

  #admin-page .chart-card canvas {
    height: 300px !important;  /* taller chart on desktop */
    width: 100% !important;
  }

  #admin-page .chart-header h3 {
    font-size: 1.4rem;    /* slightly larger title */
  }

  #admin-page #yearFilter {
    font-size: 1rem;      /* slightly larger dropdown text */
    padding: 10px 14px;
  }
  
}









/* === DOCTOR MAIN PAGE === */
#doctor-page {
  background: #8ab6f8;
  min-height: 100vh;
  display: block;
  justify-content: left;
  align-items: flex-start;
  font-family: "Poppins", sans-serif;
}

/* Container */
#doctor-page .container {
  display: block;
  flex: 1;
  position: relative;
}

/* Sidebar */
#doctor-page .sidebar {
  width: 250px;
  background: #ffffff;
  color: #333;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.08);
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0; /* hidden by default */
  z-index: 1000;
  transition: transform 0.3s ease;
}

#doctor-page .sidebar.active {
  left: 0;
}

/* Profile circle */
#doctor-page .profile-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
 background: linear-gradient(135deg, #007bff, #66ccff);
 margin-top: 20px;
 margin-bottom: 30px;
}

/* Sidebar nav */
#doctor-page .nav {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 60px;
}

#doctor-page .nav li {
  padding: 12px 15px;
  margin-bottom: 10px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

#doctor-page .nav li:hover {
   background: #e6f2ff;
  color: #007bff;
}

#doctor-page .nav li.active {
  background: #007bff;
  color: #fff;
}

/* Main content */
#doctor-page .main-content {
  flex: 1;
  padding: 40px;
  margin-left: 250px;
  transition: margin-left 0.3s ease;
}

#doctor-page .main-content h1 {
  font-size: 2rem;
  margin-bottom: 10px;
  color: #222;
}

#doctor-page .subtitle {
  font-size: 1rem;
  color: #666;
  margin-bottom: 30px;
}

/* Cards */
#doctor-page .cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

#doctor-page .card {
  flex: 0 1 260px; /* don't grow, can shrink, base width 260px */
  min-width: 260px;
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

#doctor-page .card:hover {
  transform: translateY(-3px);
}

#doctor-page .card-icon {
  font-size: 2rem;
  color: #28a745;
  margin-right: 15px;
}

#doctor-page .card-info h3 {
  font-size: 1rem;
  margin-bottom: 5px;
  color: #333;
}

#doctor-page .card-info p {
  font-size: 0.9rem;
  color: #666;
}


/* Tables  FOR COLLABORATIONS AND APPOINTMENTS */ 
#doctor-page table {
  width: 100%;
  max-width: 600px; /* limit max width */
  border-collapse: collapse;
  margin-top: 20px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

#doctor-page table th, #doctor-page table td {
  padding: 12px 15px;
  text-align: left;
}

#doctor-page table th {
  background: #4f46e5;
  color: #fff;
}

#doctor-page table tr:nth-child(even) {
  background: #eef2ff;
}

#doctor-page table tr:hover {
   background: #eef2ff;
}

/* Content sections */
#doctor-page .content-section {
  display: none;
}
#doctor-page .content-section.active {
  display: block;
}

/* Wrap status and buttons inline */
#doctor-page .status-actions {
  display: flex;
  align-items: center;
  gap: 10px; /* space between status and buttons */
}

/* Make form inline */
#doctor-page .status-actions form {
  display: flex;
  gap: 5px; /* space between approve and reject buttons */
  margin: 0; /* remove default form margin */
}

/* Button styles */
#doctor-page .status-actions button {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

#doctor-page .status-actions .approve-btn {
  background-color: #28a745;
  color: white;
}

#doctor-page .status-actions .reject-btn {
  background-color: #dc3545;
  color: white;
}

#doctor-page .status-actions button:hover {
  opacity: 0.9;
}

/* === PRESCRIPTION FORM STYLING === */
#doctor-page .prescription-form {
  width: 100%;
  max-width: 600px;
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: auto;
}

#doctor-page .prescription-form label {
  font-weight: bold;
  margin-bottom: 5px;
}

#doctor-page .prescription-form input,
#doctor-page .prescription-form select,
#doctor-page .prescription-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

/* Group form rows for better alignment */
#doctor-page .prescription-form .form-group {
  display: flex;
  flex-direction: column;
}

/* Small label + input fields (frequency type) */
#doctor-page .prescription-form .inline-field {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Hide interval/times-per-day fields by default */
#interval_field,
#times_per_day_field {
  display: none;
}

/* === Add & Remove Buttons Styling (Match Save Button) === */
#doctor-page .prescription-form #add-medicine-btn,
#doctor-page .prescription-form .remove-btn {
  background-color: #4e73df; /* same as Save */
  color: #fff;
  border: none;
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.1s ease;
}

/* Hover effect */
#doctor-page .prescription-form #add-medicine-btn:hover,
#doctor-page .prescription-form .remove-btn:hover {
  background: #6c97f4; /* lighter blue on hover */
  transform: translateY(-1px);
}

/* Optional: make remove button red for contrast */
#doctor-page .prescription-form .remove-btn {
  background-color: #e74c3c;
}

#doctor-page .prescription-form .remove-btn:hover {
  background-color: #ff6b6b;
}

/* Save Prescription Button */
#doctor-page .prescription-form button[type="submit"] {
 background-color: #4e73df;
  color: #fff;
  border: none;
  padding: 12px;
  font-size: 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
  margin-top: 10px;
}

#doctor-page .prescription-form button[type="submit"]:hover {
  background: #6c97f4;
}


/* === PROFILE FORM FIXES === */
#doctor-page .profile-box {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  max-width: 1200px;
  margin: 20px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 20px; /* Reduced from 30px 40px */
  box-sizing: border-box;
}

#doctor-page .profile-box form {
  display: contents; /* This makes form children participate in grid */
  width: 100%;
}

#doctor-page .profile-box .form-group {
  margin-bottom: 0; /* Remove extra bottom margin */
  display: flex;
  flex-direction: column;
}

#doctor-page .profile-box label {
  font-size: 14px;
  margin-bottom: 6px; /* Reduced from default */
  display: block;
  font-weight: 500;
  color: #333;
}

#doctor-page .profile-box input,
#doctor-page .profile-box select,
#doctor-page .profile-box textarea {
  padding: 10px 12px; /* Consistent padding */
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0; /* Remove any bottom margin */
}

/* Make sure form groups span full width properly */
#doctor-page .profile-box .form-group {
  grid-column: span 1;
}

/* Special case for full-width elements */
#doctor-page .profile-box h1 {
  grid-column: 1 / -1;
  margin-bottom: 15px; /* Reduced from 20px */
}

#doctor-page #profile-buttons {
  grid-column: 1 / -1;
  display: flex;
  gap: 15px;
  justify-content: flex-start;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

/* Remove any extra margins from buttons */
#doctor-page #profile-buttons button {
  margin: 0;
  padding: 12px 25px;
}

#doctor-page #editBtn {
  background: #007bff;
  color: white;
}

#doctor-page #saveBtn {
  background: #28a745;
  color: white;
}

#doctor-page #cancelBtn {
  background: #6c757d;
  color: white;
}

#doctor-page #profile-buttons button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}
/* === DOCTOR PAGE STATUS COLORS === */
#doctor-page .status {
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 14px;
  display: inline-block;
}

#doctor-page .status.pending {
  background-color: #ffeeba;
  color: #856404;
}

#doctor-page .status.confirmed {
  background-color: #d4edda;
  color: #155724;
}

#doctor-page .status.cancelled {
  background-color: #f8d7da;
  color: #721c24;
}

#doctor-page .status.completed {
  background-color: #cce5ff;
  color: #004085;
}


/* Notifications container inside doctor page */
#doctor-page .notif-container {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-top: 20px;
}

/* Notification card */
#doctor-page .notif-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  margin-bottom: 15px; /* add spacing */
  transition: transform 0.2s ease, box-shadow 0.2s ease;

}

#doctor-page .notif-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

#doctor-page .notif-card.unread {
  border-left: 10px solid #d80d0d;
  background: #f8faff;
}

#doctor-page .notif-card.read {
  border-left: 10px solid #16ef20;
  opacity: 0.8;
}

#doctor-page .notif-card p {
  margin: 0 0 5px;
  font-size: 15px;
  color: #333;
}

#doctor-page .notif-card small {
  font-size: 13px;
  color: #777;
}

#doctor-page .notif-status {
  margin-top: 8px;
  font-weight: bold;
  font-size: 14px;
}

#doctor-page .status-read {
  color: #28a745; /* green */
}

#doctor-page .status-unread {
  color: #dc3545; /* red */
}

#doctor-page .profile-box input,
#doctor-page .profile-box select {
  padding: 10px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  width: 100%;
  box-sizing: border-box;
}

#doctor-page select.readonly {
  pointer-events: none; /* Can't be clicked */
  background-color: white; /* Keep normal look */
  color: black;
  border: 1px solid #ccc;
}


/* Hamburger */
#doctor-page .hamburger {
  display: none;
  position: fixed;
  top: 15px;
  left: 15px;
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
   color: #e90ea4 !important;
  z-index: 1100;
}

/* Overlay (mobile only) */
#doctor-page .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  display: none;
  z-index: 900;
}
#doctor-page .overlay.active {
  display: block;
}


#doctor-page .sidebar.active ~ .hamburger {
  left: 230px; /* move with sidebar */
}

/* === TOP HEADER === */
.top-header {
  position: fixed;
  top: 0;
  left: 250px; /* same as your sidebar width */
  width: calc(100% - 250px); /* occupy remaining space */
  height: 100px;
  background: linear-gradient(135deg, #007bff, #66ccff);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.top-header h2 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
}

.top-header .header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.top-header .welcome-text {
  font-weight: 500;
  font-size: 0.95rem;
   margin-left: 40px;    
}

.top-header button {
  background: #fff;
  color: #007bff;
  border: none;
  border-radius: 6px;
  padding: 8px 15px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: 0.3s ease;
}

.top-header button:hover {
  background: #e6f2ff;
  color: #0056b3;
}

/* Adjust spacing since header is fixed */
#doctor-page .container {
  margin-top: 100px;
}

#doctor-page .notif-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

#doctor-page .notif-card {
  display: flex;
  flex-direction: column; /* stack content vertically */
  align-items: flex-start;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 12px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#doctor-page .notif-item {
  display: flex;
  align-items: center;
  width: 100%;
}

#doctor-page .notif-content {
  margin-left: 10px;
}

#doctor-page #delete-selected {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
}

#my-collaborations {
    display: flex;          /* enable flexbox */
    gap: 20px;              /* space between left and right columns */
    justify-content: space-between;
    flex-wrap: nowrap;      /* keep them side by side */
    margin-top: 20px;
}

#doctor-page #my-collaborations .left-column {
    flex: 3;                /* take more space */
    margin-top: 15px;
}

#doctor-page #my-collaborations .right-column {
    position: absolute;
    top: 25px;              /* aligns with top of parent */
    right: 0px;            /* sticks to right edge */
    width: 600px;        /* set desired width */
    padding: 10px;
    border-radius: 8px;
    
}
/* Enhanced Reschedule Button Styling for Doctor Page */
#doctor-page .reschedule-btn {
    background: linear-gradient(135deg, #ffc107, #ff8c00) !important;
    color: white !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease !important;
    margin: 2px !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3) !important;
}

#doctor-page .reschedule-btn:hover {
    background: linear-gradient(135deg, #ff8c00, #ff6b00) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
}

#doctor-page .reschedule-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* Enhanced Modal Styling for Doctor Page */
#doctor-page .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

#doctor-page .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border-radius: 10px;
    width: 400px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    animation: modalSlideIn 0.3s ease-out;
    position: relative;
    border: none;
}

@keyframes modalSlideIn {
    from { 
        opacity: 0; 
        transform: translateY(-30px) scale(0.95); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

#doctor-page .close {
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
}

#doctor-page .close:hover {
    color: #ff0000;
    transform: scale(1.1);
}

#doctor-page .form-group {
    margin-bottom: 15px;
}

#doctor-page .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
}

#doctor-page .form-group input, 
#doctor-page .form-group textarea {
    width: 100%;
    padding: 8px;
    margin: 5px 0;
    border: 2px solid #e9ecef;
    border-radius: 4px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

#doctor-page .form-group input:focus, 
#doctor-page .form-group textarea:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    outline: none;
}

#doctor-page .form-group input[readonly] {
    background-color: #f8f9fa;
    cursor: not-allowed;
}

/* Additional styling for form buttons */
#doctor-page .modal-content button[type="submit"] {
    background: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s ease;
}

#doctor-page .modal-content button[type="submit"]:hover {
    background: #0056b3;
}

#doctor-page .modal-content button[type="button"] {
    background: #6c757d;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s ease;
}

#doctor-page .modal-content button[type="button"]:hover {
    background: #545b62;
}

/* Notification Badge Styles */
#doctor-page .notification-badge {
    position: relative;
    display: inline-block;
}

#doctor-page .badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #ff4444, #cc0000);
    color: white;
    border-radius: 50%;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    animation: pulse 2s infinite;
}



/* Make the notifications menu item stand out */
#doctor-page .nav li[data-target="notifications"] {
    position: relative;
}

/* Highlight when there are new notifications */
#doctor-page .nav li[data-target="notifications"].has-notifications {
    background: rgba(255, 68, 68, 0.1);
    border-left: 3px solid #ff4444;
}


/* Popup Notification Styles */
#doctor-popup-notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    max-width: 400px;
}

.floating-notification {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    margin-bottom: 10px;
    animation: slideInRight 0.3s ease-out;
    border-left: 4px solid #ffeb3b;
    cursor: pointer;
}

.floating-notification-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notification-bell {
    font-size: 20px;
    animation: ring 0.5s ease-in-out;
}

.notification-text {
    font-weight: 600;
    font-size: 14px;
    flex-grow: 1;
}

.close-notification {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    margin-left: 10px;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes ring {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    75% { transform: rotate(-15deg); }
}




/* === TERMINATION MODAL STYLES === */
.termination-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
}

.termination-modal-content {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    margin: 10% auto;
    padding: 30px;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    border: 1px solid #e0e0e0;
    position: relative;
    animation: slideDown 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideDown {
    from { 
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.termination-modal h2 {
    color: #dc3545;
    margin-bottom: 20px;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    border-bottom: 2px solid #f1f1f1;
    padding-bottom: 15px;
}

.termination-reason-group {
    margin-bottom: 25px;
}

.termination-reason-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #495057;
    font-size: 14px;
}

.termination-reason-group select,
.termination-reason-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.3s ease;
    background-color: #fff;
    box-sizing: border-box;
}

.termination-reason-group select:focus,
.termination-reason-group textarea:focus {
    outline: none;
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
    transform: translateY(-1px);
}

.termination-reason-group textarea {
    resize: vertical;
    min-height: 100px;
    font-family: "Poppins", sans-serif;
    line-height: 1.5;
}

.termination-reason-group textarea::placeholder {
    color: #6c757d;
    opacity: 0.7;
}

.termination-modal-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.cancel-termination {
    padding: 12px 25px;
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 14px;
}

.cancel-termination:hover {
    background: #5a6268;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

.confirm-termination {
    padding: 12px 25px;
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 14px;
}

.confirm-termination:hover {
    background: linear-gradient(135deg, #c82333, #a71e2a);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

.confirm-termination:active,
.cancel-termination:active {
    transform: translateY(0);
}

/* Custom select arrow */
.termination-reason-group select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
    padding-right: 45px;
}

/* Responsive design */
@media (max-width: 768px) {
    .termination-modal-content {
        margin: 5% auto;
        padding: 20px;
        width: 95%;
    }
    
    .termination-modal-actions {
        flex-direction: column-reverse;
        gap: 10px;
    }
    
    .cancel-termination,
    .confirm-termination {
        width: 100%;
        text-align: center;
    }
}

/* Enhanced terminate button in table */
.terminate-btn {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

.terminate-btn:hover {
    background: linear-gradient(135deg, #c82333, #a71e2a);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4);
}

.terminate-btn:active {
    transform: translateY(0);
}

/* Close button styling */
.termination-modal .close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    color: #6c757d;
    cursor: pointer;
    transition: color 0.3s ease;
    background: none;
    border: none;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.termination-modal .close:hover {
    color: #dc3545;
    background: #f8f9fa;
}

/* Required field indicator */
.termination-reason-group label::after {
    content: " *";
    color: #dc3545;
}

/* Custom scrollbar for textarea */
.termination-reason-group textarea::-webkit-scrollbar {
    width: 6px;
}

.termination-reason-group textarea::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.termination-reason-group textarea::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.termination-reason-group textarea::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

@media (min-width: 769px) {
  #doctor-page .sidebar {
    left: 0;
    width: 250px;
    padding: 20px;
  }

   #doctor-page .main-content {
    margin-left: 250px; /* space for sidebar */
    padding: 20px 40px;  /* top/bottom = 40px, left/right = 60px */
    transition: margin-left 0.3s ease;
  }

  /* Profile Box on Desktop (2 columns) */
  #doctor-page .profile-box {
    max-width: 1200px;
    width: 1000%;
    margin: 20px auto;
    padding: 30px 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 40px;
  background: #dbeafe;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }

  .top-header {
    justify-content: flex-start;   /* align items to left */
    padding-left: 30px;            /* add some spacing from sidebar */
    text-align: left;              /* align text inside */
  }

  .top-header h2 {
    text-align: left;              /* left-align the title */
  }

  .top-header .welcome-text {
    margin-left: auto;             /* push right section to the right */
  }
}

/* === MOBILE FIXES FOR COLLABORATIONS AND APPOINTMENTS === */
@media (max-width: 768px) {
    /* Fix for My Collaborations section */
    #my-collaborations {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    #doctor-page #my-collaborations .left-column,
    #doctor-page #my-collaborations .right-column {
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        top: auto !important;
        right: auto !important;
    }
    
    /* Fix tables for mobile */
    #doctor-page table {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        font-size: 14px;
    }
    
    #doctor-page table th,
    #doctor-page table td {
        padding: 8px 10px !important;
        min-width: 120px;
        white-space: nowrap;
    }
    
    /* Fix status actions on mobile */
    #doctor-page .status-actions {
        flex-direction: column;
        gap: 5px;
        align-items: flex-start;
    }
    
    #doctor-page .status-actions form {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
    }
    
    #doctor-page .status-actions button {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
    
    /* Fix cards layout */
    #doctor-page .cards {
        flex-direction: column;
        gap: 15px;
    }
    
    #doctor-page .card {
        flex: 1 1 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
    }
    
    /* Fix prescription form */
    #doctor-page .prescription-form {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px !important;
    }
    
    /* Fix profile box */
    #doctor-page .profile-box {
        grid-template-columns: 1fr !important;
        padding: 15px !important;
        gap: 15px !important;
    }
    
    /* Fix modal for mobile */
    #doctor-page .modal-content {
        width: 95% !important;
        margin: 10px auto !important;
        padding: 15px !important;
    }
    
    /* Fix header spacing */
    #doctor-page .main-content {
        margin-top: 120px !important;
        padding: 15px !important;
    }
    
    /* Ensure proper spacing in appointments */
    #appointments table {
        min-width: 600px; /* Allow horizontal scrolling */
    }
    
    /* Fix navigation items */
    #doctor-page .nav li {
        padding: 10px 12px !important;
        font-size: 14px;
    }
}

/* === ADDITIONAL TABLET FIXES === */
@media (max-width: 1024px) and (min-width: 769px) {
    #doctor-page #my-collaborations .right-column {
        position: static !important;
        width: 100% !important;
        margin-top: 20px !important;
    }
    
    #my-collaborations {
        flex-direction: column !important;
    }
}

/* === SPECIFIC FIX FOR COLLABORATIONS LAYOUT === */
#my-collaborations {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

#doctor-page #my-collaborations .left-column {
    flex: 1;
    min-width: 0; /* Prevent overflow */
}

#doctor-page #my-collaborations .right-column {
    flex: 1;
    min-width: 0; /* Prevent overflow */
    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* === SCROLLABLE TABLES === */
.table-container {
    overflow-x: auto;
    width: 100%;
    margin: 15px 0;
}

/* === IMPROVED BUTTON STYLES FOR MOBILE === */
@media (max-width: 768px) {
    #doctor-page .approve-btn,
    #doctor-page .reject-btn,
    #doctor-page .reschedule-btn,
    #doctor-page .terminate-btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
        margin: 2px !important;
        min-width: 70px;
    }
    
    /* Stack buttons vertically on very small screens */
    @media (max-width: 480px) {
        #doctor-page .status-actions form {
            flex-direction: column;
            width: 100%;
        }
        
        #doctor-page .status-actions button {
            width: 100%;
            margin: 2px 0 !important;
        }
    }
}

/* === FIX FOR OVERFLOW ISSUES === */
#doctor-page .container {
    overflow-x: hidden;
}

#doctor-page .main-content {
    overflow-x: hidden;
}

.content-section {
    overflow-x: hidden;
}

/* === IMPROVE READABILITY ON MOBILE === */
@media (max-width: 768px) {
    #doctor-page h1 {
        font-size: 1.5rem !important;
    }
    
    #doctor-page h2 {
        font-size: 1.3rem !important;
    }
    
    #doctor-page h3 {
        font-size: 1.1rem !important;
    }
    
    .card-info h3 {
        font-size: 0.9rem !important;
    }
    
    .card-info p {
        font-size: 0.8rem !important;
    }
}









/* === CAREGIVER MAIN PAGE === */
#caregiver-page {
  background: #8ab6f8;
  min-height: 100vh;
  display: flex;
  font-family: "Poppins", sans-serif;
}

/* Container */
#caregiver-page .container {
  display: flex;
  flex: 1;
  position: relative;
}

/* Sidebar */
#caregiver-page .sidebar {
  width: 250px;
  background: #ffffff;
  color: #333;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.08);
  height: 100vh;
  transition: left 0.3s ease;
  position: fixed;
  top: 0;
  left: 0; /* hidden by default */
  z-index: 1000;
}
#caregiver-page .sidebar.active {
  left: 0;
}

/* Profile circle */
#caregiver-page .profile-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
 background: linear-gradient(135deg, #007bff, #66ccff);
  margin-top: 25px;
  margin-bottom: 30px;
}

/* Sidebar nav */
#caregiver-page .nav {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
 margin-top: 60px;
}

#caregiver-page .nav li {
  padding: 12px 15px;
  margin-bottom: 10px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

#caregiver-page .nav li:hover {
   background: #e6f2ff;
  color: #007bff;
}

#caregiver-page .nav li.active {
  background: #007bff;
  color: #fff;
}

/* Main content */
#caregiver-page .main-content {
  flex: 1;
  padding: 20px 40px; /* Reduced top padding from 40px to 20px */
  margin-left: 250px;
  transition: margin-left 0.3s ease;
}

#caregiver-page .main-content h1 {
  font-size: 2rem;
  margin-bottom: 10px;
  color: #222;
}

#caregiver-page .subtitle {
  font-size: 1rem;
  color: #666;
  margin-bottom: 30px;
}

/* === DASHBOARD SPECIFIC STYLES === */
 .caregiver-dashboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Center the cards container */
 .caregiver-dashboard .cards {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1200px;
}

/* Center individual cards */
 .caregiver-dashboard .card {
  flex: 0 1 auto;
  min-width: 260px;
  max-width: 300px;
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

 .caregiver-dashboard .card:hover {
  transform: translateY(-3px);
}

 .caregiver-dashboard .card-icon {
  font-size: 2rem;
  color: #3b82f6;
  margin-right: 15px;
}

 .caregiver-dashboard .card-info h3 {
  font-size: 1rem;
  margin-bottom: 5px;
  color: #333;
}

.caregiver-dashboard .card-info p {
  font-size: 0.9rem;
  color: #666;
}

/* Center the table container */
 .caregiver-dashboard table {
  width: 100%;
  max-width: 1200px;
  border-collapse: collapse;
  margin: 20px 130px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Center the dashboard heading */
 .caregiver-dashboard h1 {
  text-align: center;
  margin: 20px -100px;
  width: 100%;
  margin-bottom: 20px;
}

/* Cards for other sections (keep original) */
#caregiver-page .cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

#caregiver-page .card {
  flex: 1;
  min-width: 260px;
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

#caregiver-page .card:hover {
  transform: translateY(-3px);
}

#caregiver-page .card-icon {
  font-size: 2rem;
  color: #3b82f6;
  margin-right: 15px;
}

#caregiver-page .card-info h3 {
  font-size: 1rem;
  margin-bottom: 5px;
  color: #333;
}

#caregiver-page .card-info p {
  font-size: 0.9rem;
  color: #666;
}


/* Tables */
#caregiver-page table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

#caregiver-page table th, #caregiver-page table td {
  padding: 12px 15px;
  text-align: left;
}

#caregiver-page table th {
  background: #4f46e5;
  color: #fff;
}

#caregiver-page table tr:nth-child(even) {
  background: #f0f7ff;
}

#caregiver-page table tr:hover {
   background: #eef2ff;
}

/* Content sections */
#caregiver-page .content-section {
  display: none;
}
#caregiver-page .content-section.active {
  display: block;
}

/* Profile box */
#caregiver-page .profile-box {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  max-width: 800px;
  margin: 20px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

#caregiver-page .profile-box label {
  font-size: 14px;
  margin-bottom: 4px;
  display: block;
}
#caregiver-page .profile-box form {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columns */
  gap: 20px; /* space between items */
  width: 1100px;
}

#caregiver-page #profile-buttons button {
  padding: 10px 30px;
  margin-top: 20px;
  border: none;
  border-radius: 6px;
  background: #448afa;
  color: white;
}


#caregiver-page .profile-box input,
#caregiver-page .profile-box select {
  padding: 10px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  width: 100%;
  box-sizing: border-box;
}

/* === ACTION BUTTONS FOR ASSIGN, END CONTRACT & END COLLAB === */
#caregiver-page button[name="assign_patient"],
#caregiver-page button[name="end_contract"],
#caregiver-page button[name="terminate_collab"],
#caregiver-page button[name="send_reschedule"] {
  background-color: #4e73df;   /* Blue color */
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Hover effect */
#caregiver-page button[name="assign_patient"]:hover,
#caregiver-page button[name="end_contract"]:hover,
#caregiver-page button[name="terminate_collab"]:hover,
#caregiver-page button[name="send_reschedule"]:hover {
  background-color: #375acb;   /* Darker blue */
}


/* APPOINTMENT TABLE DESIGN */
#appointments table {
    width: 100%; /* full width of the container */
    max-width: 1200px; /* optional: limit max width */
    border-collapse: collapse;
    table-layout: auto; /* let columns adjust naturally */
    margin-top: 20px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}


/* Table cells */
#appointments table th,
#appointments table td {
    padding: 12px 15px;
    text-align: left;
    white-space: nowrap;       /* prevent wrapping */
    overflow: hidden;
    text-overflow: ellipsis;   /* show ... if content too long */
}

/* Status and buttons inline */
#appointments .status-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap; /* wrap buttons if narrow */
    align-items: center;
}

#appointments .status-actions form {
    display: flex;
    gap: 5px;
}


/* Optional: give each column a width */
#appointments table th:nth-child(1), 
#appointments table td:nth-child(1) { width: 25%; } /* Patient */
#appointments table th:nth-child(2), 
#appointments table td:nth-child(2) { width: 25%; } /* Caregiver */
#appointments table th:nth-child(3), 
#appointments table td:nth-child(3) { width: 25%; } /* Date */
#appointments table th:nth-child(4), 
#appointments table td:nth-child(4) { width: 25%; } /* Status */

/* Buttons style like cards */
#appointments .status-actions button {
    padding: 4px 8px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
}

#appointments .status-actions button[name="approve"] {
    background-color: #d4edda;
    color: #155724;
}

#appointments .status-actions button[name="reject"] {
    background-color: #f8d7da;
    color: #721c24;
}

/* === CAREGIVER PAGE STATUS COLORS === */
#caregiver-page .status {
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 14px;
  display: inline-block;
}

#caregiver-page .status.pending {
  background-color: #fff3cd;
  color: #856404;
}

#caregiver-page .status.confirmed {
  background-color: #c3e6cb;
  color: #155724;
}

#caregiver-page .status.cancelled {
  background-color: #f5c6cb;
  color: #721c24;
}

#caregiver-page .status.completed {
  background-color: #b8daff;
  color: #004085;
}

#caregiver-page .notif-cards {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
}

#caregiver-page .notif-card {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 10px;
    width: 1200px;
    min-width: 500px;
    padding: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

#caregiver-page .notif-card.unread {
    border-left: 5px solid #4f46e5; /* highlight unread */
    font-weight: bold;
}

#caregiver-page .notif-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#caregiver-page .notif-card small {
    color: #888;
    font-size: 0.85rem;
}


#caregiver-page.alert {
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  opacity: 1;
  transition: opacity 0.5s ease;
}
#caregiver-page.alert.success {
  background: #d4edda;
  color: #155724;
}
#caregiver-page.alert.error {
  background: #f8d7da;
  color: #721c24;
}
#caregiver-page.alert.hide {
  opacity: 0;
}

/* White Panel Style */
#collaborations .white-panel {
    background: white;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column; /* Keep form rows stacked */
    gap: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Form Row Flex */
#collaborations .white-panel .form-row {
    display: flex;
    gap: 15px;
    align-items: flex-end;  /* align inputs and button */
    flex-wrap: wrap;
}

/* Form Group */
#collaborations .white-panel .form-group {
    display: flex;
    flex-direction: column;
    flex: 1 1 200px; /* grow/shrink, minimum width */
}

/* Submit Button Group */
#collaborations .white-panel .submit-group {
    flex: 0 0 auto; /* button fits content */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* align with inputs */
}

/* Labels inside white-panel */
#collaborations .white-panel label {
    font-weight: 600;       /* Makes text bold */
    color: #333333;         /* Dark gray color */
    margin-bottom: 5px;     /* Space between label and input */
    font-size: 14px;        /* Optional: matches input size */
}

/* Inputs & Labels */
#collaborations .white-panel select,
#collaborations .white-panel input{
    width: 500px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
    box-sizing: border-box;
}
#collaborations .white-panel button{
  padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
    box-sizing: border-box;
}

/* Button Styles */
#collaborations .white-panel .btn-primary {
    background-color: #4e73df;
    color: white;
    font-weight: 600;
    cursor: pointer;
    border: none;
}
#collaborations .white-panel .btn-primary:hover {
    background-color: #375acb;
}




/* Appointment Form Specific */
#appointments .white-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#appointments .form-row {
    display: flex;
    justify-content: space-between; /* spreads left & right evenly */
    gap: 20px;
    flex-wrap: nowrap; /* Keeps them on one line */
    align-items: flex-end;
}


#appointments .form-group {
    display: flex;
    flex-direction: column;
    flex: 1 1 200px; /* responsive width */
}

#appointments .submit-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#appointments .form-group label {
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 14px;
    color: #333;
}

#appointments .form-group select,
#appointments .form-group input{
    width: 450px;          /* Full width of group */
    min-width: 250px;     /* Prevent too small fields */
    padding: 10px;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

#appointments .submit-group button{
   padding: 10px;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    width: 100%;
}


#appointments .submit-group button.btn-primary {
    background-color: #4e73df;
    color: white;
    border: none;
    cursor: pointer;
    font-weight: 600;
}

#appointments .submit-group button.btn-primary:hover {
    background-color: #375acb;
}


/* Reschedule Button */
#caregiver-page .reschedule-btn {
    background: #ffc107;
    color: #000;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s;
}

#caregiver-page .reschedule-btn:hover {
    background: #e0a800;
}

/* Modal Styles */
#caregiver-page .modal {
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#caregiver-page .modal[style*="display: flex"] {
    opacity: 1;
}

#caregiver-page .modal-content {
    background-color: #fefefe;
    margin: 20px;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border: 2px solid #4f46e5;
}

#caregiver-page .modal-content h2 {
    margin-bottom: 20px;
    color: #333;
    font-size: 1.5rem;
    text-align: center;
    border-bottom: 2px solid #eef2ff;
    padding-bottom: 10px;
}

#caregiver-page .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 10px;
    transition: color 0.3s ease;
}

#caregiver-page .close:hover {
    color: #000;
}

#caregiver-page .modal-buttons {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    justify-content: center;
}

#caregiver-page .submit-btn {
    background: #28a745;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.3s ease;
}

#caregiver-page .cancel-btn {
    background: #6c757d;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.3s ease;
}

#caregiver-page .submit-btn:hover {
    background: #218838;
    transform: translateY(-1px);
}

#caregiver-page .cancel-btn:hover {
    background: #5a6268;
    transform: translateY(-1px);
}

/* Form group styling for modal */
#caregiver-page .modal-content .form-group {
    margin-bottom: 20px;
}

#caregiver-page .modal-content label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

#caregiver-page .modal-content input[type="datetime-local"],
#caregiver-page .modal-content textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    background: #fff;
}

#caregiver-page .modal-content input[type="datetime-local"]:focus,
#caregiver-page .modal-content textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

#caregiver-page .modal-content textarea {
    resize: vertical;
    min-height: 80px;
    font-family: "Poppins", sans-serif;
}

/* Loading state for buttons */
#caregiver-page .submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}

/* === TOP HEADER === */
.top-header {
  position: fixed;
  top: 0;
  left: 250px; /* same as your sidebar width */
  width: calc(100% - 250px); /* occupy remaining space */
  height: 100px;
  background: linear-gradient(135deg, #007bff, #66ccff);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}


.top-header h2 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
}

.top-header .header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.top-header .welcome-text {
  font-weight: 500;
  font-size: 0.95rem;
   margin-left: 40px;    
}

.top-header button {
  background: #fff;
  color: #007bff;
  border: none;
  border-radius: 6px;
  padding: 8px 15px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: 0.3s ease;
}

.top-header button:hover {
  background: #e6f2ff;
  color: #0056b3;
}

/* Adjust spacing since header is fixed */
#caregiver-page .container {
  margin-top: 20px;
}

/* For delete notification */

#caregiver-page .notif-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

#caregiver-page .notif-card {
  display: flex;
  align-items: flex-start;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 8px;
  margin-bottom: 8px;
  background: #fff;
}

#caregiver-page .notif-item {
  display: flex;
  align-items: flex-start;
  width: 100%;
}
#caregiver-page .notif-check {
  margin-top: 5px; /* Optional: small adjustment to look balanced */
}

#caregiver-page .notif-content {
  margin-left: 10px;
}

#caregiver-page #delete-selected {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
}


/* Hamburger */
#caregiver-page .hamburger {
  display: none;
  position: fixed;
  top: 15px;
  left: 15px;
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
   color: #e90ea4 !important;
  z-index: 1100;
}

/* Overlay (for mobile sidebar) */
#caregiver-page .overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 900;
}
#caregiver-page .overlay.active {
  display: block;
}

/* Reschedule Modal Styles - FIXED VERSION */
#caregiver-page .modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
}

#caregiver-page .modal-content {
    background-color: #fefefe;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border: 2px solid #4f46e5;
}

#caregiver-page .modal-content h2 {
    margin-bottom: 20px;
    color: #333;
    font-size: 1.5rem;
    text-align: center;
    border-bottom: 2px solid #eef2ff;
    padding-bottom: 10px;
}

#caregiver-page .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 10px;
    transition: color 0.3s ease;
}

#caregiver-page .close:hover {
    color: #000;
}

#caregiver-page .modal-buttons {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    justify-content: center;
}

#caregiver-page .submit-btn {
    background: #28a745;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.3s ease;
}

#caregiver-page .cancel-btn {
    background: #6c757d;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.3s ease;
}

/* Notification Badge Styles */
 #caregiver-page .notification-badge {
    position: relative;
    display: inline-block;
}

 #caregiver-page .badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #ff4444, #cc0000);
    color: white;
    border-radius: 50%;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    animation: pulse 2s infinite;
}



/* Make the notifications menu item stand out */
 #caregiver-page .nav li[data-target="notifications"] {
    position: relative;
}

/* Highlight when there are new notifications */
 #caregiver-page .nav li[data-target="notifications"].has-notifications {
    background: rgba(255, 68, 68, 0.1);
    border-left: 3px solid #ff4444;
}

/* === SCROLLABLE TABLE CONTAINER FOR PATIENTS === */
.table-container {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin: 20px 0;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.scrollable-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.scrollable-table thead {
    background: #4f46e5;
    color: #fff;
}

.scrollable-table th {
    padding: 15px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 2px solid #3f37d8;
    position: sticky;
    top: 0;
    z-index: 10;
}

.scrollable-table tbody {
    display: block;
    max-height: 350px; /* Fixed height for scroll - ONLY the body scrolls */
    overflow-y: auto;
}

.scrollable-table thead tr, 
.scrollable-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.scrollable-table td {
    padding: 12px 12px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    color: #333;
}

.scrollable-table tbody tr:hover {
    background: #f8f9ff;
}

.scrollable-table tbody tr:last-child td {
    border-bottom: none;
}

/* Button styles for table */
.scrollable-table .btn-assign,
.scrollable-table .btn-end {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.scrollable-table .btn-assign {
    background: #28a745;
    color: white;
}

.scrollable-table .btn-assign:hover {
    background: #218838;
}

.scrollable-table .btn-end {
    background: #dc3545;
    color: white;
}

.scrollable-table .btn-end:hover {
    background: #c82333;
}

/* Remove the old card styles since we're using tables now */
.patients-grid,
.patient-card,
.patient-info,
.patient-actions {
    display: none;
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
  #caregiver-page .main-content {
    margin-left: 0;
    padding: 60px 15px 20px 15px; /* add top padding to avoid overlap */
  }

  /* Dashboard responsive adjustments */
 .caregiver-dashboard .cards {
    flex-direction: column;
    align-items: center;
  }
  
  .caregiver-dashboard .card {
    width: 100%;
    max-width: 400px;
  }
  
 .caregiver-dashboard table {
    margin: 20px 10px;
    width: calc(100% - 20px);
  }

  #caregiver-page .cards {
    flex-direction: column;
  }

  #caregiver-page .sidebar {
    left: -100%; /* hidden on mobile */
    width: 280px;
  }
  #caregiver-page .sidebar.active {
    left: 0; /* toggle visible on mobile */
  }

  #caregiver-page .hamburger {
    display: block;
    color: #e90ea4 !important; /* Ensure it stays pink on mobile */
  }

  /* Notification bell fixed top-right */
  #caregiver-page #notif-bell {
    position: fixed;
    top: 15px;
    right: 15px;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1100;
  }

  /* Notification count badge */
  #caregiver-page #notif-count {
    position: absolute;
    top: -5px;
    right: -10px;
    background: red;
    color: white;
    font-size: 0.7rem;
    padding: 2px 5px;
    border-radius: 50%;
  }

  #caregiver-page table {
    display: block;
    width: 100%;
    overflow-x: auto;
    font-size: 0.9rem;
  }

  #caregiver-page .profile-box {
    max-width: 100%;
    grid-template-columns: 1fr;
    padding: 15px;
    margin: 10px 0;
  }

  #caregiver-page .profile-box form {
    width: 100%;
    grid-template-columns: 1fr;
  }

  /* Scrollable table mobile adjustments */
   .table-container {
    margin: 15px 0;
  }
  
  .scrollable-table tbody {
    max-height: 300px; /* Slightly smaller on mobile */
  }
  
  .scrollable-table {
    font-size: 13px;
  }
  
  .scrollable-table th,
  .scrollable-table td {
    padding: 10px 8px;
  }
  
  .scrollable-table .btn-assign,
  .scrollable-table .btn-end {
    padding: 4px 8px;
    font-size: 11px;
  }

  /* Top Header Mobile */
  .top-header {
    left: 0;
    width: 100%;
    height: 60px;
    padding: 0 15px;
    justify-content: space-between;
  }

  .top-header h2 {
    font-size: 1rem;
  }

  .top-header .welcome-text {
    font-size: 0.85rem;
    margin-left: 0;
  }

  /* White Panels Mobile */
  #collaborations .white-panel,
  #appointments .white-panel {
    padding: 15px;
  }

  #collaborations .white-panel select,
  #collaborations .white-panel input {
    width: 100%;
  }

  #appointments .form-row {
    flex-direction: column;
    gap: 15px;
  }

  #appointments .form-group select,
  #appointments .form-group input {
    width: 100%;
    min-width: auto;
  }

  /* Notifications Mobile */
  #caregiver-page .notif-card {
    width: 100%;
    min-width: auto;
    margin: 10px 0;
  }

  /* Modal Mobile */
  #caregiver-page .modal-content {
    margin: 10px;
    padding: 20px;
  }

  #caregiver-page .modal-buttons {
    flex-direction: column;
    gap: 10px;
  }

  /* Form adjustments for mobile */
  #collaborations .white-panel .form-row {
    flex-direction: column;
    align-items: stretch;
  }

  #collaborations .white-panel .form-group {
    flex: 1 1 auto;
  }
    #caregiver-page .container {
    margin-top: 60px; /* Adjusted for mobile */
  }
}

@media (max-width: 480px) {
  #caregiver-page .main-content {
    padding: 50px 10px 15px 10px;
  }

  #caregiver-page .main-content h1 {
    font-size: 1.5rem;
  }

  /* Dashboard small screen adjustments */
  .caregiver-dashboard .card {
    max-width: 100%;
  }

  /* Scrollable table small screen adjustments */
  .table-container {
    margin: 15px 0;
  }
  
  .scrollable-table tbody {
    max-height: 300px; /* Slightly smaller on mobile */
  }
  
  .scrollable-table {
    font-size: 13px;
  }
  
  .scrollable-table th,
  .scrollable-table td {
    padding: 10px 8px;
  }
  
  .scrollable-table .btn-assign,
  .scrollable-table .btn-end {
    padding: 4px 8px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .scrollable-table tbody {
    max-height: 250px; /* Even smaller on very small screens */
  }
  
  .scrollable-table {
    font-size: 12px;
  }
  
  .scrollable-table th,
  .scrollable-table td {
    padding: 8px 6px;
  }
  
  .scrollable-table .btn-assign,
  .scrollable-table .btn-end {
    padding: 4px 6px;
    font-size: 10px;
  }
      .top-header {
    height: 55px; /* Even smaller on very small screens */
  }

  #caregiver-page .container {
    margin-top: 55px; /* Adjusted for very small screens */
  }
}

@media (min-width: 769px) {
  #caregiver-page .sidebar {
    left: 0;
    width: 250px;
    padding: 20px;
  }

   #caregiver-page .main-content {
    margin-left: 250px; /* space for sidebar */
    padding: 20px;
    transition: margin-left 0.3s ease;
     margin-top: 100px; /* pushes content below fixed top header */
  }

  /* Profile Box on Desktop (2 columns) */
  #caregiver-page .profile-box {
    max-width: 1200px;
    width: 100%;
    margin: 20px auto;
    padding: 30px 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 40px;
   background: #dbeafe;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }

  .top-header {
    justify-content: flex-start;   /* align items to left */
    padding-left: 30px;            /* add some spacing from sidebar */
    text-align: left;              /* align text inside */
  }

  .top-header h2 {
    text-align: left;              /* left-align the title */
  }

  .top-header .welcome-text {
    margin-left: auto;             /* push right section to the right */
  }
}

/* Tablet Styles */
@media (min-width: 769px) and (max-width: 1024px) {
  #caregiver-page .main-content {
    padding: 30px;
  }
}









/* === PATIENT MAIN PAGE === */
#patient-page {
   background: #8ab6f8;
  min-height: 100vh;
  display: flex;
  font-family: "Poppins", sans-serif;
}

/* Container */
#patient-page .container {
  display: flex;
  flex: 1;
  position: relative;
}

/* Main content */
#patient-page .main-content {
  padding: 40px;
  margin-left: 250px; /* space for sidebar */
  flex: 1;
  transition: margin-left 0.3s ease;
}

#patient-page .main-content h1 {
  font-size: 2rem;
  text-align: left;
  margin-bottom: 20px;
  color: #222;
}

#patient-page .subtitle {
  font-size: 1rem;
  color: #666;
  margin-bottom: 30px;
}

/* Sidebar */
#patient-page .sidebar {
  width: 250px;
  background: #ffffff;
  color: #333;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.08);
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0; /* always visible on desktop */
  z-index: 1000;
  transition: transform 0.3s ease;
}

#patient-page .sidebar.active {
 left: 0;
}

/* Profile circle */
#patient-page .profile-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, #007bff, #66ccff);
  margin-top: 25px;
  margin-bottom: 30px;
}

/* Sidebar navigation */
#patient-page .nav {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
   margin-top: 40px;
}

#patient-page .nav li {
  padding: 12px 15px;
  margin-bottom: 10px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

#patient-page .nav li:hover {
   background: #e6f2ff;
  color: #007bff;
}

#patient-page .nav li.active {
  background: #007bff;
  color: #fff;
}

/* === CONTENT SECTIONS - FIXED === */
#patient-page .content-section {
  display: none !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

#patient-page .content-section.active {
  display: block !important;
  opacity: 1;
  visibility: visible;
}

/* Force only one section to be visible at a time */
#patient-page .main-content .content-section:not(.active) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#patient-page .main-content .content-section.active {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* === ENHANCED CARDS LAYOUT === */
#patient-page .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

#patient-page .card {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border-left: 4px solid #007bff;
  transition: transform 0.3s ease;
  text-align: center;
}

#patient-page .card:hover {
  transform: translateY(-5px);
}

#patient-page .card h2 {
  font-size: 2em;
  margin: 10px 0;
  color: #2c3e50;
}

#patient-page .card-icon {
  font-size: 2.5em;
  display: block;
  margin-bottom: 10px;
  margin-right: 15px;
}

/* === QUICK ACTIONS === */
#patient-page .quick-actions {
  background: white;
  padding: 25px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#patient-page .action-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 15px;
}

#patient-page .action-btn {
  padding: 12px 20px;
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

#patient-page .action-btn:hover {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

/* === DASHBOARD SECTIONS === */
#patient-page .dashboard-section {
  background: white;
  padding: 25px;
  border-radius: 12px;
  margin-bottom: 25px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* === APPOINTMENT CARDS === */
#patient-page .appointment-cards {
  display: grid;
  gap: 15px;
  margin-top: 15px;
}

#patient-page .appointment-card {
  display: flex;
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border-left: 4px solid #28a745;
  transition: transform 0.2s ease;
}

#patient-page .appointment-card:hover {
  transform: translateX(5px);
}

#patient-page .appointment-date {
  text-align: center;
  padding-right: 20px;
  border-right: 2px solid #f8f9fa;
  min-width: 80px;
}

#patient-page .appointment-date small {
  display: block;
  color: #6c757d;
  font-size: 0.9em;
}

#patient-page .appointment-details {
  flex: 1;
  padding-left: 20px;
}

#patient-page .status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8em;
  font-weight: 500;
  margin-top: 5px;
}

#patient-page .status-badge.confirmed {
  background: #d4edda;
  color: #155724;
}

#patient-page .status-badge.pending {
  background: #fff3cd;
  color: #856404;
}

#patient-page .view-all-btn {
  width: 100%;
  padding: 12px;
  background: #f8f9fa;
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 15px;
  transition: all 0.3s ease;
}

#patient-page .view-all-btn:hover {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

/* === MEDICATION STYLES === */
#patient-page .medication-list {
  margin-top: 15px;
}

#patient-page .medication-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 8px;
  border-left: 4px solid #17a2b8;
}

#patient-page .med-time {
  font-weight: 600;
  color: #007bff;
}

#patient-page .med-name {
  font-weight: 500;
  flex: 1;
  margin-left: 15px;
}

#patient-page .med-dosage {
  color: #6c757d;
  font-size: 0.9em;
}

#patient-page .no-meds {
  text-align: center;
  color: #6c757d;
  font-style: italic;
  padding: 20px;
}

/* === MEDICINE SCHEDULE === */
#patient-page .medicine-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

#patient-page .medicine-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border-left: 4px solid #17a2b8;
}

#patient-page .medicine-card h3 {
  color: #2c3e50;
  margin-bottom: 10px;
  border-bottom: 2px solid #f8f9fa;
  padding-bottom: 8px;
}

#patient-page .medicine-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8em;
  font-weight: 500;
  margin-top: 10px;
}

#patient-page .medicine-status.active {
  background: #d4edda;
  color: #155724;
}

/* === EMERGENCY CONTACTS === */
#patient-page .emergency-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

#patient-page .emergency-card {
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  text-align: center;
  border: 2px solid #dc3545;
  transition: transform 0.3s ease;
}

#patient-page .emergency-card:hover {
  transform: scale(1.02);
}

#patient-page .emergency-card h3 {
  color: #dc3545;
  margin-bottom: 8px;
}

#patient-page .relationship {
  color: #6c757d;
  font-style: italic;
  margin-bottom: 15px;
}

#patient-page .phone, #patient-page .email {
  margin: 8px 0;
  font-size: 0.95em;
}

#patient-page .emergency-actions {
  margin-top: 15px;
}

#patient-page .call-btn, #patient-page .sms-btn {
  display: inline-block;
  padding: 8px 16px;
  margin: 5px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

#patient-page .call-btn {
  background: #dc3545;
  color: white;
}

#patient-page .call-btn:hover {
  background: #c82333;
}

#patient-page .sms-btn {
  background: #28a745;
  color: white;
}

#patient-page .sms-btn:hover {
  background: #218838;
}

/* === EMPTY STATES === */
#patient-page .empty-state, #patient-page .no-medicines, #patient-page .no-contacts {
  text-align: center;
  padding: 40px 20px;
  background: #f8f9fa;
  border-radius: 12px;
  color: #6c757d;
  margin: 20px 0;
}

#patient-page .empty-state h3, #patient-page .no-medicines h3, #patient-page .no-contacts h3 {
  color: #6c757d;
  margin-bottom: 10px;
}

/* === NOTIFICATIONS HEADER === */
#patient-page .notifications-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

#patient-page .notif-controls {
  display: flex;
  gap: 15px;
  align-items: center;
}

#patient-page #notif-filter {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: white;
}

#patient-page .notif-actions {
  display: flex;
  gap: 15px;
  align-items: center;
}

/* === CAREGIVER TABLE === */
#patient-page .caregiver-table-wrapper {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-top: 20px;
}

#patient-page .caregiver-table {
  width: 100%;
  border-collapse: collapse;
}

#patient-page .caregiver-table th {
  background: #007bff;
  color: white;
  padding: 15px;
  text-align: left;
}

#patient-page .caregiver-table td {
  padding: 15px;
  border-bottom: 1px solid #f8f9fa;
}

#patient-page .caregiver-table tr:hover {
  background: #f8f9fa;
}

/* === MY CAREGIVER SECTION === */
#patient-page .no-caregiver-card {
    background: white;
    padding: 60px 40px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border: 2px dashed #e9ecef;
    margin: 20px auto; /* Center horizontally */
    max-width: 800px;
}

#patient-page .no-caregiver-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.7;
}

#patient-page .no-caregiver-card h3 {
    color: #6c757d;
    margin-bottom: 15px;
    font-weight: 600;
}

#patient-page .no-caregiver-card p {
    color: #868e96;
    line-height: 1.6;
    margin: 0 auto;
}

/* Caregiver Profile Card - Centered */
#patient-page .caregiver-profile-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    overflow: hidden;
    margin: 90px 0px; /* Center horizontally */
    margin-top: 10px;
    margin-left: 200px;
    max-width: 1400px;
    width: 800px; /* Add some responsive width */
}

/* Center the entire caregiver section */
#patient-page #caregiver.content-section {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center children horizontally */
    justify-content: flex-start; /* Align to top */
    width: 100%;
}

#patient-page #caregiver.content-section h1 {
    text-align: center; /* Center the main heading */
    width: 100%;
    margin-bottom: 30px;
}

/* Caregiver Header */
#patient-page .caregiver-header {
    background: linear-gradient(135deg, #007bff, #66ccff);
    color: white;
    padding: 30px 40px;
    display: flex;
    align-items: center;
    justify-content: center; /* Center header content */
    gap: 25px;
    text-align: center; /* Center text */
}

#patient-page .caregiver-avatar {
    width: 70px;
    height: 70px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: bold;
    backdrop-filter: blur(10px);
    border: 3px solid rgba(255,255,255,0.3);
    flex-shrink: 0;
}

#patient-page .caregiver-name {
    text-align: center; /* Center the name and role */
}

#patient-page .caregiver-name h2 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
}

#patient-page .caregiver-role {
    margin: 5px 0 0 0;
    opacity: 0.9;
    font-size: 1rem;
}

/* Caregiver Sections Container - Centered */
#patient-page .caregiver-sections-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 100%; /* Ensure it takes full width of parent */
}

#patient-page .caregiver-section {
    padding: 30px;
    border-bottom: 1px solid #f1f3f4;
    text-align: center; /* Center section content */
}

#patient-page .caregiver-section:last-child {
    border-bottom: none;
}

/* Contact & Personal Details Side by Side */
#patient-page .caregiver-section.contact-section {
    border-right: 1px solid #f1f3f4;
    grid-column: 1;
}

#patient-page .caregiver-section.details-section {
    grid-column: 2;
}

#patient-page .caregiver-section.address-section {
    grid-column: 1 / -1;
    border-top: 1px solid #f1f3f4;
}

/* Center section titles and content */
#patient-page .section-title {
    display: flex;
    align-items: center;
    justify-content: center; /* Center the title */
    gap: 10px;
    margin: 0 0 20px 0;
    color: #2c3e50;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
}

#patient-page .section-icon {
    font-size: 1.3rem;
}

/* Information Grid - Centered */
#patient-page .info-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center; /* Center the info items */
}

#patient-page .info-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center; /* Center the text in info items */
    width: 100%;
    max-width: 400px; /* Limit width for better readability */
}

#patient-page .info-item.full-width {
    width: 100%;
}

#patient-page .info-label {
    color: #6c757d;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#patient-page .info-value {
    color: #2c3e50;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    padding: 6px 0;
}

/* Address Section - Centered */
#patient-page .address-content {
    display: flex;
    align-items: center;
    justify-content: center; /* Center address content */
    gap: 15px;
    text-align: center;
}

#patient-page .address-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}

#patient-page .address-content .info-value {
    flex: 1;
    line-height: 1.5;
    text-align: center;
}

/* === Upcoming Appointments Section === */
#patient-page #upcoming-appointments {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    width: 100%;
    max-width: 1000px;
    margin-top: 20px;
}

#patient-page .appointments-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

/* Placeholder Card */
#patient-page .no-appointments-placeholder {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

#patient-page .no-appointments-placeholder h3 {
    margin-bottom: 10px;
    color: #555;
    font-size: 1.2rem;
}

#patient-page .no-appointments-placeholder p {
    margin-bottom: 15px;
    color: #777;
    font-size: 0.95rem;
}

#patient-page .no-appointments-placeholder button {
    padding: 8px 18px;
    border: none;
    border-radius: 8px;
    background: #4f46e5;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s ease;
}

#patient-page .no-appointments-placeholder button:hover {
    background: #4f46e5;
}

/* Caregiver Actions */
.caregiver-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    max-width: 1000px;
    margin: 15px auto 40px auto;
}

.caregiver-actions .btn {
    padding: 10px 15px;
    background: #4f46e5;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
}

.caregiver-actions .btn:hover {
    background: #4338ca;
}

.caregiver-actions .btn-secondary {
    background: #f3f4f6;
    color: #111;
}

/* === Appointment Logs Table === */
#patient-page #appointments {
  background: #fff;
  padding: 25px 30px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  max-width: 1000px;
  margin: 30px auto;
}

#patient-page #appointments h1 {
  font-size: 1.8rem;
  color: #222;
  margin-bottom: 20px;
  text-align: left;
}

/* Month Filter Form */
#patient-page #appointments form {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

#patient-page #appointments input[type="month"] {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
}

#patient-page #appointments button {
  padding: 8px 16px;
  background: #4f46e5;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s ease;
}

#patient-page #appointments button:hover {
  background: #4f46e5;
}

/* Table Styling */
#patient-page .appointments-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

#patient-page .appointments-table th,
#patient-page .appointments-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
  word-wrap: break-word;
  font-size: 0.95rem;
}

#patient-page .appointments-table th {
  background: #4f46e5;
  color: #fff;
  font-weight: 600;
  border-radius: 12px 12px 0 0;
}

#patient-page .appointments-table tr:nth-child(even) {
  background: #f9f9f9;
}

#patient-page .appointments-table td {
  color: #333;
}

/* Status Labels */
#patient-page .appointments-table .status {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  text-transform: capitalize;
  text-align: center;
}

#patient-page .appointments-table .status.pending {
  background-color: #fff3cd;
  color: #856404;
}

#patient-page .appointments-table .status.approved {
  background-color: #d4edda;
  color: #155724;
}

#patient-page .appointments-table .status.cancelled {
  background-color: #f8d7da;
  color: #721c24;
}

#patient-page .appointments-table .status.rescheduled {
  background-color: #d1c4e9;
  color: #4b0082;
}

/* === PATIENT PAGE STATUS COLORS === */
#patient-page .status {
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 14px;
  display: inline-block;
}

#patient-page .status.pending {
  background-color: #fff3cd;
  color: #856404;
}

#patient-page .status.confirmed {
  background-color: #c3e6cb;
  color: #155724;
}

#patient-page .status.cancelled {
  background-color: #f5c6cb;
  color: #721c24;
}

#patient-page .status.completed {
  background-color: #b8daff;
  color: #004085;
}

/* Patient Profile Box styled like Caregiver */
#patient-page .profile-box form{
  background: #dbeafe;
  padding: 30px 40px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 40px;
  max-width: 1200px;
  margin: 20px auto; 
}

#patient-page .profile-box label {
  font-size: 14px;
  margin-bottom: 4px;
  display: block;
}

#patient-page .profile-box input,
#patient-page .profile-box select {
  padding: 10px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  width: 100%;
  box-sizing: border-box;
}

#patient-page #profile-buttons button {
  padding: 10px 30px;
  margin-top: 20px;
  border: none;
  border-radius: 6px;
  background: #448afa;
  color: white;
  font-weight: 600;
  cursor: pointer;
  grid-column: 1 / -1;
}

#patient-page .datetime {
  white-space: nowrap;
} 

/* === PATIENT NOTIFICATIONS CARDS === */
#patient-page .notif-cards {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
    width: 100%;
    max-width: 1000px;
}

#patient-page .notif-card {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
}

#patient-page .notif-card.unread {
    border-left: 5px solid #c90c0c;
    font-weight: bold;
}

#patient-page .notif-card .notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

/* Checkbox */
#patient-page #notifications label {
    font-weight: 500;
    cursor: pointer;
}

#patient-page #notifications input[type="checkbox"] {
    margin-right: 8px;
    width: 18px;
    height: 18px;
}

/* Delete Button */
#patient-page #delete-selected {
    background-color: #ff5e5e;
    color: #fff;
    border: none;
    text-align: right;
    padding: 8px 15px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#patient-page .notif-card .notif-message {
    font-size: 0.95rem;
    color: #333;
    margin-bottom: 5px;
}

#patient-page .notif-card .notif-meta {
    font-size: 0.8rem;
    color: #888;
}

#patient-page .notif-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* === TOP HEADER === */
.top-header {
  position: fixed;
  top: 0;
  left: 250px;
  width: calc(100% - 250px);
  height: 100px;
  background: linear-gradient(135deg, #007bff, #66ccff);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.top-header h2 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
}

.top-header .header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.top-header .welcome-text {
  font-weight: 500;
  font-size: 0.95rem;
   margin-left: 40px;    
}

.top-header button {
  background: #fff;
  color: #007bff;
  border: none;
  border-radius: 6px;
  padding: 8px 15px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: 0.3s ease;
}

.top-header button:hover {
  background: #e6f2ff;
  color: #0056b3;
}

/* Adjust spacing since header is fixed */
#patient-page .container {
  margin-top: 100px;
}

#patient-page .hamburger {
  display: none;
  position: fixed;
  top: 15px;
  left: 15px;
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
  color: #e90ea4 !important;
  z-index: 1100;
}

/* Overlay (mobile only) */
#patient-page .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  display: none;
  z-index: 900;
}

#patient-page .overlay.active {
  display: block;
}

#patient-page .sidebar.active ~ .hamburger {
  left: 230px;
}




/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
  #patient-page .main-content {
    margin-left: 0;
    padding: 20px;
  }
  
  #patient-page .hamburger {
    display: block;
    color: #e90ea4 !important; /* Ensure it stays pink on mobile */
  }
  
  #patient-page .sidebar {
    left: -100%;
  }
  
  #patient-page .sidebar.active {
    left: 0;
  }
  
  #patient-page .main-content h1 {
    margin-top: 30px;
    text-align: center;
  }
  
  #patient-page .profile-box form {
    grid-template-columns: 1fr;
    padding: 15px;
    background: #dbeafe;
  }
  
  .hamburger {
    display: block;
  }
  
  /* Mobile responsive adjustments */
  #patient-page .cards {
    grid-template-columns: 1fr;
  }
  
  #patient-page .action-buttons {
    flex-direction: column;
  }
  
  #patient-page .appointment-card {
    flex-direction: column;
  }
  
  #patient-page .appointment-date {
    border-right: none;
    border-bottom: 2px solid #f8f9fa;
    padding-right: 0;
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
  
  #patient-page .appointment-details {
    padding-left: 0;
  }
  
  #patient-page .medication-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  #patient-page .notifications-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  #patient-page .notif-controls {
    flex-direction: column;
    width: 100%;
  }
  
  #patient-page .medicine-cards, 
  #patient-page .emergency-cards {
    grid-template-columns: 1fr;
  }
  
  /* My Caregiver Mobile Styles */
  #patient-page .caregiver-header {
    flex-direction: column;
    text-align: center;
    padding: 30px 20px;
  }
  
  #patient-page .caregiver-avatar {
    width: 70px;
    height: 70px;
    font-size: 1.5rem;
  }
  
  #patient-page .caregiver-name h2 {
    font-size: 1.5rem;
  }
  
  #patient-page .info-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  #patient-page .caregiver-section {
    padding: 20px;
  }
  
  #patient-page .section-title {
    font-size: 1.1rem;
  }
  
  #patient-page .info-value {
    font-size: 1rem;
  }
  
  #patient-page .no-caregiver-card {
    padding: 40px 20px;
    margin: 20px;
  }
  
   #patient-page .top-header {
    left: 0;
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  
   #patient-page .top-header .welcome-text {
    margin-left: 0;
  }
}

/* Notification Badge Styles */
 #patient-page .badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #ff4444, #cc0000);
    color: white;
    border-radius: 50%;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    animation: pulse 2s infinite;
}



/* Make the notifications menu item stand out */
 #patient-page .nav li[data-target="notifications"] {
    position: relative;
}

/* Highlight when there are new notifications */
 #patient-page .nav li[data-target="notifications"].has-notifications {
    background: rgba(255, 68, 68, 0.1);
    border-left: 3px solid #ff4444;
}

@media (min-width: 769px) {
  #patient-page .sidebar {
    left: 0;
    width: 250px;
    padding: 20px;
  }

  #patient-page .main-content {
    margin-left: 250px;
    padding: 20px;
    transition: margin-left 0.3s ease;
  }

  #patient-page .hamburger {
    display: none;
  }

  /* Profile Box on Desktop */
  #patient-page .profile-box form {
    max-width: 1200px;
    width: 1000px;
    margin: 20px auto;
    margin-left: 70px;
    padding: 30px 40px;
    grid-template-columns: 1fr 1fr;
    gap: 30px 40px;
    background: #dbeafe;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }

  .top-header {
    justify-content: flex-start;
    padding-left: 30px;
    text-align: left;
  }

  .top-header h2 {
    text-align: left;
  }

  .top-header .welcome-text {
    margin-left: auto;
  }
}

/* Extra Small Screens */
@media (max-width: 480px) {
  #patient-page .caregiver-profile-card {
    margin: 10px;
  }
  
  #patient-page .caregiver-header {
    padding: 25px 15px;
  }
  
  #patient-page .caregiver-section {
    padding: 15px;
  }
}

/* Mark as Read Button */
#patient-page #mark-read-btn {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#patient-page #mark-read-btn:hover {
    background-color: #0056b3;
}