/* ============================================
   Healthcare Dashboard - Modern Styling
   ============================================ */

/* ============================================
   CSS Variables
   ============================================ */
   @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

   :root {
       /* Brand Colors */
       --primary-color: #0d6efd;
       --primary-dark: #0a58ca;
       --primary-light: #6ea8fe;
       --secondary-color: #6c757d;
       --success-color: #198754;
       --info-color: #0dcaf0;
       --warning-color: #ffc107;
       --danger-color: #dc3545;
       --dark-color: #212529;
       --light-color: #f8f9fa;
       --white: #ffffff;
       
       /* Gradients */
       --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
       --gradient-users: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
       --gradient-messages: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
       --gradient-health: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
       --gradient-bg: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
       
       /* Shadows */
       --shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
       --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
       --shadow-lg: 0 10px 30px rgba(0,0,0,0.15);
       --shadow-xl: 0 20px 50px rgba(0,0,0,0.2);
       
       /* Transitions */
       --transition-fast: all 0.2s ease;
       --transition-normal: all 0.3s ease;
       --transition-slow: all 0.5s ease;
   }
   
   /* ============================================
      Global Styles & Animations
      ============================================ */
   body {
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
       background: var(--gradient-bg);
       min-height: 100vh;
       color: var(--dark-color);
       overflow-x: hidden;
   }
   
   main {
       min-height: calc(100vh - 200px);
       overflow-x: hidden;
   }
   
   @keyframes fadeIn {
       from { opacity: 0; transform: translateY(20px); }
       to { opacity: 1; transform: translateY(0); }
   }
   
   @keyframes fadeInDown {
       from { opacity: 0; transform: translateY(-30px); }
       to { opacity: 1; transform: translateY(0); }
   }
   
   @keyframes fadeInUp {
       from { opacity: 0; transform: translateY(10px); }
       to { opacity: 1; transform: translateY(0); }
   }
   
   @keyframes slideInFromLeft {
       from { opacity: 0; transform: translateX(-30px); }
       to { opacity: 1; transform: translateX(0); }
   }
   
   @keyframes slideInFromRight {
       from { opacity: 0; transform: translateX(30px); }
       to { opacity: 1; transform: translateX(0); }
   }
   
   @keyframes slideInFromTop {
       from { opacity: 0; transform: translateY(-30px); }
       to { opacity: 1; transform: translateY(0); }
   }
   
   @keyframes slideInFromBottom {
       from { opacity: 0; transform: translateY(20px); }
       to { opacity: 1; transform: translateY(0); }
   }
   
   @keyframes slideInRight {
       from { opacity: 0; transform: translateX(100px); }
       to { opacity: 1; transform: translateX(0); }
   }
   
   @keyframes cardSlideIn {
       from { opacity: 0; transform: translateY(40px) scale(0.95); }
       to { opacity: 1; transform: translateY(0) scale(1); }
   }
   
   @keyframes popIn {
       0% { transform: scale(0); opacity: 0; }
       60% { transform: scale(1.1); opacity: 1; }
       100% { transform: scale(1); }
   }
   
   @keyframes pulse {
       0%, 100% { transform: scale(1); }
       50% { transform: scale(1.05); }
   }
   
   @keyframes heartbeat {
       0%, 100% { transform: scale(1); }
       25% { transform: scale(1.15); }
       50% { transform: scale(1); }
   }
   
   @keyframes float {
       0%, 100% { transform: translate(0, 0) scale(1); }
       50% { transform: translate(30px, -30px) scale(1.1); }
   }
   
   @keyframes shake {
       0%, 100% { transform: translateX(0); }
       25% { transform: translateX(-10px); }
       75% { transform: translateX(10px); }
   }
   
   /* ============================================
      Navigation Bar
      ============================================ */
   .navbar,
   nav.navbar,
   .navbar.navbar-expand-lg,
   .navbar.bg-primary,
   .navbar-primary {
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
       background-color: transparent !important;
       box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4) !important;
       padding: 1rem 0 !important;
       position: relative;
       overflow: visible;
   }
   
   /* Force remove any Bootstrap background utility classes */
   .navbar[class*="bg-"] {
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
       background-color: transparent !important;
   }
   
   .navbar::before {
       content: '';
       position: absolute;
       top: -50%;
       left: -50%;
       width: 200%;
       height: 200%;
       background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
       animation: rotate 20s linear infinite;
       pointer-events: none;
   }
   
   .navbar::after {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: rgba(255, 255, 255, 0.05);
       backdrop-filter: blur(10px);
       pointer-events: none;
   }
   
   .navbar > .container-fluid {
       position: relative;
       z-index: 1;
   }
   
   /* Brand */
   .navbar-brand {
       font-weight: 800;
       font-size: 1.6rem;
       transition: var(--transition-fast);
       letter-spacing: -0.5px;
       text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
       position: relative;
       padding: 0.5rem 1rem;
   }
   
   .navbar-brand::before {
       content: '';
       position: absolute;
       inset: 0;
       background: rgba(255, 255, 255, 0.1);
       border-radius: 12px;
       transform: scale(0);
       transition: var(--transition-normal);
   }
   
   .navbar-brand:hover::before {
       transform: scale(1);
   }
   
   .navbar-brand:hover {
       transform: scale(1.05);
       text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
   }
   
   .navbar-brand i {
       animation: heartbeat 1.5s ease-in-out infinite;
       filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
   }
   
   /* Navigation Links */
   .nav-link {
       position: relative;
       transition: var(--transition-fast);
       font-weight: 600;
       padding: 0.6rem 1rem !important;
       border-radius: 10px;
       margin: 0 0.2rem;
   }
   
   .nav-link::before {
       content: '';
       position: absolute;
       inset: 0;
       background: rgba(255, 255, 255, 0.15);
       border-radius: 10px;
       transform: scale(0);
       transition: var(--transition-normal);
   }
   
   .nav-link:hover::before {
       transform: scale(1);
   }
   
   .nav-link:hover {
       transform: translateY(-3px);
       text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   }
   
   .nav-link::after {
       content: '';
       position: absolute;
       bottom: 5px;
       left: 50%;
       width: 0;
       height: 3px;
       background: var(--white);
       border-radius: 2px;
       transition: var(--transition-normal);
       transform: translateX(-50%);
       box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
   }
   
   .nav-link:hover::after {
       width: 70%;
   }
   
   .nav-link.active::after,
   .nav-item.active .nav-link::after {
       width: 70%;
       background: var(--white);
       box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
   }
   
   .nav-link.dropdown-toggle::before,
   .nav-link.dropdown-toggle::after {
       display: none;
   }
   
   .nav-link i {
       transition: var(--transition-fast);
       filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
   }
   
   .nav-link:hover i {
       transform: rotate(10deg) scale(1.1);
   }
   
   /* Dropdown */
   .dropdown-toggle::after {
       display: none !important;
   }
   
   .dropdown-menu {
       border: 1px solid rgba(102, 126, 234, 0.3) !important;
       background: #ffffff !important;
       backdrop-filter: blur(20px);
       box-shadow: 0 15px 50px rgba(102, 126, 234, 0.4) !important;
       border-radius: 16px !important;
       padding: 0.8rem !important;
       margin-top: 0.8rem;
       overflow: visible;
       z-index: 9999 !important;
       position: absolute !important;
       visibility: visible;
       opacity: 0;
       overflow: visible;
       transform: translateY(-20px) scale(0.95);
       transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
   }
   
   .dropdown-menu.show {
       visibility: visible !important;
       opacity: 1 !important;
       transform: translateY(0) scale(1) !important;
       display: block !important;
       margin-top: 8px !important;
       box-shadow: 0 8px 24px rgba(102, 126, 234, 0.25) !important;
   }
   
   .dropdown-item,
   .dropdown-menu .dropdown-item,
   a.dropdown-item,
   button.dropdown-item,
   .dropdown-menu > li > a,
   .dropdown-menu > li > button {
       border-radius: 10px !important;
       padding: 0.7rem 1.2rem !important;
       transition: var(--transition-fast) !important;
       font-weight: 600 !important;
       position: relative;
       overflow: visible !important;
       color: #212529 !important;
       background: transparent !important;
       text-decoration: none !important;
       display: flex !important;
       align-items: center !important;
       opacity: 1 !important;
       filter: none !important;
       unicode-bidi: normal !important;
       white-space: nowrap !important;
   }
   
   /* Material Symbols in dropdown */
   .dropdown-item .material-symbols-outlined {
       font-family: 'Material Symbols Outlined' !important;
       font-size: 18px !important;
       margin-right: 8px !important;
       opacity: 1 !important;
       color: inherit !important;
   }
   
   .dropdown-item::before {
       content: '';
       position: absolute;
       left: 0;
       top: 0;
       height: 100%;
       width: 3px;
       background: var(--gradient-primary);
       transform: scaleY(0);
       transition: var(--transition-normal);
   }
   
   .dropdown-item:hover::before {
       transform: scaleY(1);
   }
   
   .dropdown-item:hover,
   .dropdown-menu .dropdown-item:hover,
   a.dropdown-item:hover,
   button.dropdown-item:hover {
       background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%) !important;
       transform: translateX(8px) !important;
       color: #667eea !important;
       opacity: 1 !important;
   }
   
   .dropdown-item.text-danger,
   a.dropdown-item.text-danger,
   button.dropdown-item.text-danger,
   .dropdown-menu .text-danger {
       color: #dc3545 !important;
       opacity: 1 !important;
   }
   
   .dropdown-item.text-danger:hover,
   a.dropdown-item.text-danger:hover,
   button.dropdown-item.text-danger:hover {
       background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.05) 100%) !important;
       color: #dc3545 !important;
       opacity: 1 !important;
   }
   
   .dropdown-item i,
   .dropdown-item .fa-solid {
       width: 24px;
       text-align: center;
       transition: var(--transition-fast);
       color: inherit !important;
       opacity: 1 !important;
       margin-right: 8px !important;
   }
   
   .dropdown-item:hover i,
   .dropdown-item:hover .fa-solid {
       transform: scale(1.2);
   }
   
   .dropdown-divider {
       margin: 0.5rem 0 !important;
       border-top: 1px solid rgba(102, 126, 234, 0.2) !important;
   }
   

   table.dataTable .dropdown-menu {
       background: #ffffff !important;
       overflow: visible !important; 
   }
   
   table.dataTable .dropdown-item {
       color: #212529 !important;
       background: transparent !important;
       opacity: 1 !important;
   }
   
   table.dataTable .dropdown-item:hover {
       color: #667eea !important;
       background: rgba(102, 126, 234, 0.1) !important;
   }
   
   table.dataTable .dropdown-item.text-danger {
       color: #dc3545 !important;
       opacity: 1 !important;
   }
   
 
   .dropdown-menu * {
       opacity: 1 !important;
       z-index: 9999 !important;
   }
   
   .dropdown-menu a,
   .dropdown-menu button {
       color: #212529 !important;
       opacity: 1 !important;
       font-size: 14px !important;
       line-height: 1.5 !important;
   }
   
   /* Navbar Toggler */
   .navbar-toggler {
       border: 2px solid rgba(255, 255, 255, 0.3);
       border-radius: 10px;
       padding: 0.5rem 0.75rem;
       transition: var(--transition-normal);
   }
   
   .navbar-toggler:hover {
       background: rgba(255, 255, 255, 0.1);
       border-color: rgba(255, 255, 255, 0.5);
       transform: scale(1.05);
   }
   
   .navbar-toggler:focus {
       box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
   }
   
   .navbar-toggler-icon {
       filter: brightness(0) invert(1);
   }
   
   .navbar-nav .nav-item.dropdown > .nav-link {
       background: transparent;
       border-radius: 50px;
       padding: 0.5rem 1.2rem !important;
       transition: var(--transition-fast);
   }
   
   .navbar-nav .nav-item.dropdown > .nav-link:hover {
       background: rgba(255, 255, 255, 0.15);
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
   }
   
   .navbar-nav .nav-item.dropdown > .nav-link i {
       font-size: 1.2rem;
   }

   dataTables_wrapper {
    overflow: visible !important;
  }
  
  table.dataTable {
    overflow: visible !important;
  }
  
  .table-responsive {
    overflow: visible !important;
  }
  
 
  .dropdown-menu {
    z-index: 1055 !important; 
  }
  

  .dropdown-menu-end {
    right: 0 !important;
    left: auto !important;
  }
   

   .dashboard-container {
       padding: 2rem;
       animation: fadeIn 0.6s ease;
       max-width: 100%;
       overflow-x: hidden;
   }
   
   .dashboard-container.container-fluid {
       padding-left: 2rem;
       padding-right: 2rem;
   }
   
   .dashboard-header {
       text-align: center;
       padding: 2rem 0;
       animation: fadeInDown 0.8s ease;
   }
   
   .dashboard-title {
       font-size: 2.5rem;
       font-weight: 800;
       background: var(--gradient-primary);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       margin-bottom: 0.5rem;
       letter-spacing: -1px;
   }
   
   .dashboard-subtitle {
       font-size: 1.1rem;
       color: var(--secondary-color);
       font-weight: 400;
   }
   
   /* Dashboard Cards Container */
   .dashboard-container .row {
       margin-left: 0;
       margin-right: 0;
   }
   
   .dashboard-container .row > * {
       padding-left: 0.75rem;
       padding-right: 0.75rem;
   }
   
   /* Dashboard Cards */
   .dashboard-card {
       background: var(--white);
       border-radius: 20px;
       padding: 2rem;
       box-shadow: var(--shadow-md);
       transition: var(--transition-normal);
       position: relative;
       overflow: hidden;
       height: 100%;
   }
   
   .dashboard-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 5px;
       background: var(--primary-color);
       transition: var(--transition-normal);
   }
   
   .dashboard-card.users::before {
       background: var(--gradient-users);
   }
   
   .dashboard-card.messages::before {
       background: var(--gradient-messages);
   }
   
   .dashboard-card.health::before {
       background: var(--gradient-health);
   }
   
   .dashboard-card:hover {
       transform: translateY(-10px);
       box-shadow: var(--shadow-xl);
   }
   
   .dashboard-card:hover::before {
       height: 8px;
   }
   
   .dashboard-card-icon {
       width: 70px;
       height: 70px;
       border-radius: 18px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 2rem;
       color: var(--white);
       margin-bottom: 1.5rem;
       transition: var(--transition-normal);
       position: relative;
       overflow: hidden;
   }
   
   .dashboard-card-icon::after {
       content: '';
       position: absolute;
       top: -50%;
       left: -50%;
       width: 200%;
       height: 200%;
       background: rgba(255, 255, 255, 0.1);
       transform: rotate(45deg);
       transition: var(--transition-slow);
   }
   
   .dashboard-card:hover .dashboard-card-icon::after {
       top: 150%;
       left: 150%;
   }
   
   .dashboard-card.users .dashboard-card-icon {
       background: var(--gradient-users);
       box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
   }
   
   .dashboard-card.messages .dashboard-card-icon {
       background: var(--gradient-messages);
       box-shadow: 0 8px 20px rgba(240, 147, 251, 0.4);
   }
   
   .dashboard-card.health .dashboard-card-icon {
       background: var(--gradient-health);
       box-shadow: 0 8px 20px rgba(79, 172, 254, 0.4);
   }
   
   .dashboard-card:hover .dashboard-card-icon {
       transform: scale(1.1) rotate(5deg);
   }
   
   .dashboard-card-title {
       font-size: 1.3rem;
       font-weight: 700;
       color: var(--dark-color);
       margin-bottom: 1.5rem;
       letter-spacing: -0.5px;
   }
   
   .dashboard-card-stats {
       display: flex;
       justify-content: space-around;
       gap: 1rem;
   }
   
   .dashboard-card-stats > div {
       text-align: center;
       flex: 1;
       padding: 1rem;
       background: linear-gradient(135deg, #f5f7fa 0%, #e3e8f0 100%);
       border-radius: 15px;
       transition: var(--transition-normal);
   }
   
   .dashboard-card-stats > div:hover {
       transform: scale(1.05);
       box-shadow: var(--shadow-md);
   }
   
   .stat-number {
       font-size: 2.5rem;
       font-weight: 800;
       margin: 0;
       background: var(--gradient-primary);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       line-height: 1;
   }
   
   .dashboard-card.messages .stat-number {
       background: var(--gradient-messages);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }
   
   .dashboard-card.health .stat-number {
       background: var(--gradient-health);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }
   
   .stat-label {
       font-size: 0.9rem;
       color: var(--secondary-color);
       margin: 0.5rem 0 0 0;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.5px;
   }
   

   .btn-outline-primary {
       border: 2px solid var(--primary-color);
       color: var(--primary-color);
       background: transparent;
       font-weight: 600;
       padding: 0.5rem 1.2rem;
       border-radius: 10px;
       transition: var(--transition-fast);
   }
   
   .btn-outline-primary:hover {
       background: var(--primary-color);
       color: white;
       transform: translateY(-2px);
       box-shadow: 0 4px 12px rgba(76, 108, 255, 0.3);
   }
   
   .btn-outline-secondary {
       border: 2px solid var(--secondary-color);
       color: var(--secondary-color);
       background: transparent;
       font-weight: 600;
       padding: 0.5rem 1.2rem;
       border-radius: 10px;
       transition: var(--transition-fast);
   }
   
   .btn-outline-secondary:hover {
       background: var(--secondary-color);
       color: white;
       transform: translateY(-2px);
       box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
   }
   
   .btn-outline-danger {
       border: 2px solid var(--danger-color);
       color: var(--danger-color);
       background: transparent;
       font-weight: 600;
       padding: 0.5rem 1.2rem;
       border-radius: 10px;
       transition: var(--transition-fast);
   }
   
   .btn-outline-danger:hover {
       background: var(--danger-color);
       color: white;
       transform: translateY(-2px);
       box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
   }
   

   .table-responsive {
       background: white;
       border-radius: 16px;
       padding: 1.5rem;
       box-shadow: var(--shadow-md);
       margin-bottom: 2rem;
       overflow-x: auto;
   }
   
   .table {
       margin-bottom: 0;
   }
   
   .table thead tr {
       background: var(--gradient-primary);
       color: white;
   }
   
   .table thead th {
       padding: 1rem;
       font-weight: 700;
       border: none;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       font-size: 0.85rem;
   }
   
   .table thead tr:first-child th:first-child {
       border-top-left-radius: 12px;
   }
   
   .table thead tr:first-child th:last-child {
       border-top-right-radius: 12px;
   }
   
   .table tbody tr {
       transition: var(--transition-fast);
       border-bottom: 1px solid #e5e7eb;
   }
   
   .table tbody tr:hover {
       background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
       transform: scale(1.01);
       box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
   }
   
   .table tbody td {
       padding: 1rem;
       vertical-align: middle;
       color: var(--dark-color);
   }
   

   .badge {
       padding: 0.4rem 0.8rem;
       border-radius: 20px;
       font-weight: 600;
       font-size: 0.75rem;
       letter-spacing: 0.5px;
   }
   
   .text-bg-success,
   .bg-success {
       background: var(--success-color) !important;
       color: white !important;
   }
   
   .text-bg-danger,
   .bg-danger {
       background: var(--danger-color) !important;
       color: white !important;
   }
   
   .text-bg-primary,
   .bg-primary {
       background: var(--primary-color) !important;
       color: white !important;
   }
   
   .text-bg-warning,
   .bg-warning {
       background: var(--warning-color) !important;
       color: var(--dark-color) !important;
   }
   
   .badge.rounded-pill {
       padding: 0.5rem 0.8rem;
       margin: 0 0.2rem;
       font-size: 0.8rem;
       transition: var(--transition-fast);
   }
   
   .badge.rounded-pill:hover {
       transform: scale(1.1);
   }
   

   .healthDataEntries.index.content {
       padding: 0;
       max-width: 100%;
       margin: 0;
   }
   
   .health-hero-header {
       background: var(--gradient-primary);
       padding: 5rem 3rem 4rem 3rem;
       margin: 3rem -2rem;
       position: relative;
   }
   
   .health-hero-header::before,
   .health-hero-header::after {
       content: '';
       position: absolute;
       border-radius: 50%;
   }
   
   .health-hero-header::before {
       top: -50%;
       right: -10%;
       width: 800px;
       height: 600px;
       background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
       animation: float 6s ease-in-out infinite;
   }
   
   .health-hero-header::after {
       bottom: -30%;
       left: -5%;
       width: 400px;
       height: 400px;
       background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
       animation: float 8s ease-in-out infinite reverse;
   }
   
   .hero-content {
       position: relative;
       z-index: 1;
       display: flex;
       justify-content: space-between;
       align-items: center;
       flex-wrap: wrap;
       gap: 2rem;
   }
   
   .hero-title-section {
       flex: 1;
       min-width: 300px;
       width: 100%;
       text-align: center;
   }
   
   .hero-title {
       color: white;
       margin: 0;
       font-size: 3rem;
       font-weight: 900;
       text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
       letter-spacing: -1px;
       line-height: 1.1;
       animation: slideInFromLeft 0.8s ease;
   }
   
   .hero-subtitle {
       color: rgba(255, 255, 255, 0.95);
       font-size: 1.2rem;
       margin: 1rem 0 0 0;
       font-weight: 400;
       text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
       animation: slideInFromLeft 0.8s ease 0.2s backwards;
   }
   
   .hero-actions {
       display: flex;
       justify-content: flex-end;
       margin-left: 2rem;
       margin-right: 2rem;
       gap: 1rem;
       animation: slideInFromRight 0.8s ease 0.3s backwards;
   }
   
   .btn-hero {
       padding: 1rem 2rem;
       border-radius: 50px;
       font-weight: 700;
       display: inline-flex;
       align-items: center;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       border: none;
       text-decoration: none;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
       font-size: 1rem;
       position: relative;
       overflow: hidden;
   }
   
   .btn-hero::before {
       content: '';
       position: absolute;
       top: 50%;
       left: 50%;
       width: 0;
       height: 0;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.3);
       transform: translate(-50%, -50%);
       transition: width 0.6s ease, height 0.6s ease;
   }
   
   .btn-hero:hover::before {
       width: 300px;
       height: 300px;
   }
   
   .btn-hero span,
   .btn-hero i {
       position: relative;
       z-index: 1;
   }
   
   .btn-hero.btn-primary {
       background: white;
       color: #667eea;
   }
   
   .btn-hero.btn-primary:hover {
       transform: translateY(-4px) scale(1.05);
       box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
   }
   
   .btn-hero.btn-secondary {
       background: rgba(255, 255, 255, 0.15);
       color: white;
       border: 2px solid rgba(255, 255, 255, 0.5);
       backdrop-filter: blur(10px);
   }
   
   .btn-hero.btn-secondary:hover {
       background: rgba(255, 255, 255, 0.25);
       border-color: white;
       transform: translateY(-4px) scale(1.05);
       box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
   }
   
   /* Timeline */
   .health-timeline {
       padding: 0 2rem 2rem 2rem;
   }
   
   .timeline-day {
       display: grid;
       grid-template-columns: 80px 1fr;
       gap: 2rem;
       margin-bottom: 3rem;
       animation: fadeIn 0.6s ease;
   }
   
   .timeline-date-badge {
       display: flex;
       flex-direction: column;
       align-items: center;
   }
   
   .date-circle {
       width: 70px;
       height: 70px;
       border-radius: 50%;
       background: var(--gradient-primary);
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       color: white;
       font-weight: 700;
       box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
       animation: pulse 2s ease-in-out infinite;
   }
   
   .date-day {
       font-size: 1.5rem;
       line-height: 1;
   }
   
   .date-month {
       font-size: 0.75rem;
       text-transform: uppercase;
       opacity: 0.9;
   }
   
   .date-line {
       width: 3px;
       flex: 1;
       background: linear-gradient(180deg, #667eea 0%, transparent 100%);
       margin-top: 1rem;
   }
   
   /* Entry Cards */
   .day-card {
       background: white;
       border-radius: 24px;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
       overflow: hidden;
       transition: all 0.3s ease;
   }
   
   .day-card:hover {
       box-shadow: 0 8px 30px rgba(102, 126, 234, 0.15);
   }
   
   .day-header {
       background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
       padding: 1.5rem 2rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
       border-bottom: 3px solid #667eea;
   }
   
   .day-title {
       font-size: 1.25rem;
       font-weight: 700;
       color: var(--dark-color);
       margin: 0;
   }
   
   .entry-count {
       font-size: 0.875rem;
       color: var(--secondary-color);
       font-weight: 600;
   }
   
   .daily-progress {
       display: flex;
       gap: 0.5rem;
   }
   
   .progress-dot {
       width: 40px;
       height: 40px;
       border-radius: 50%;
       background: white;
       border: 3px solid #e5e7eb;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 700;
       color: var(--secondary-color);
       transition: all 0.3s ease;
   }
   
   .progress-dot.completed {
       background: linear-gradient(135deg, #10b981 0%, #059669 100%);
       border-color: #10b981;
       color: white;
       animation: popIn 0.4s ease;
   }
   
   /* Entries Grid */
   .entries-grid {
       padding: 2rem;
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
       gap: 1.5rem;
   }
   
   .entry-card {
       background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
       border: 2px solid #e5e7eb;
       border-radius: 16px;
       padding: 1.5rem;
       transition: all 0.3s ease;
       position: relative;
   }
   
   .entry-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 5px;
       height: 100%;
       background: var(--gradient-primary);
       border-radius: 16px 0 0 16px;
       transform: scaleY(0);
       transition: transform 0.3s ease;
   }
   
   .entry-card:hover::before {
       transform: scaleY(1);
   }
   
   .entry-card:hover {
       transform: translateY(-5px);
       box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
       border-color: #667eea;
   }
   
   .entry-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 1.5rem;
       padding-bottom: 1rem;
       border-bottom: 2px dashed #e5e7eb;
   }
   
   .entry-time {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       font-weight: 600;
       color: #667eea;
       font-size: 1.1rem;
   }
   
   .patient-link {
       color: var(--secondary-color);
       text-decoration: none;
       font-size: 0.9rem;
       transition: color 0.3s ease;
   }
   
   .patient-link:hover {
       color: #667eea;
   }
   
   /* Metrics */
   .metrics-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 1rem;
       margin-bottom: 1rem;
   }
   
   .metric-card {
       display: flex;
       align-items: center;
       gap: 1rem;
       padding: 1rem;
       border-radius: 12px;
       transition: all 0.3s ease;
   }
   
   .metric-card:hover {
       transform: translateX(5px);
   }
   
   .metric-icon {
       width: 45px;
       height: 45px;
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.25rem;
       color: white;
       flex-shrink: 0;
   }
   
   .metric-data {
       display: flex;
       flex-direction: column;
   }
   
   .metric-label {
       font-size: 0.75rem;
       color: var(--secondary-color);
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.5px;
   }
   
   .metric-value {
       font-size: 1.25rem;
       font-weight: 700;
       line-height: 1.2;
   }
   
   /* Metric Type Styles */
   .metric-bp {
       background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
   }
   
   .metric-bp .metric-icon {
       background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
   }
   
   .metric-bp .metric-value {
       color: #92400e;
   }
   
   .metric-oxygen {
       background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
   }
   
   .metric-oxygen .metric-icon {
       background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
   }
   
   .metric-oxygen .metric-value {
       color: #1e40af;
   }
   
   .metric-temp {
       background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
   }
   
   .metric-temp .metric-icon {
       background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
   }
   
   .metric-temp .metric-value {
       color: #991b1b;
   }
   
   .metric-inhaler {
       background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
   }
   
   .metric-inhaler .metric-icon {
       background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
   }
   
   .metric-inhaler .metric-value {
       color: #065f46;
   }
   
   /* Entry Notes */
   .entry-notes {
       background: #f9fafb;
       border-left: 4px solid #667eea;
       padding: 1rem;
       border-radius: 8px;
       margin-bottom: 1rem;
       display: flex;
       gap: 0.75rem;
   }
   
   .entry-notes i {
       color: #667eea;
       font-size: 1.25rem;
   }
   
   .entry-notes p {
       margin: 0;
       color: var(--dark-color);
       font-size: 0.9rem;
       line-height: 1.6;
   }
   
   /* Entry Actions */
   .entry-actions {
       display: flex;
       gap: 0.75rem;
       padding-top: 1rem;
       border-top: 2px solid #f3f4f6;
   }
   
   .btn-action {
       flex: 1;
       padding: 0.625rem 1rem;
       border-radius: 10px;
       font-size: 0.875rem;
       font-weight: 600;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
       text-decoration: none;
       transition: all 0.3s ease;
       border: 2px solid;
   }
   
   .btn-view {
       background: white;
       color: #667eea;
       border-color: #667eea;
   }
   
   .btn-view:hover {
       background: #667eea;
       color: white;
       transform: translateY(-2px);
   }
   
   .btn-edit {
       background: white;
       color: var(--secondary-color);
       border-color: var(--secondary-color);
   }
   
   .btn-edit:hover {
       background: var(--secondary-color);
       color: white;
       transform: translateY(-2px);
   }
   
   .btn-delete {
       background: white;
       color: var(--danger-color);
       border-color: var(--danger-color);
   }
   
   .btn-delete:hover {
       background: var(--danger-color);
       color: white;
       transform: translateY(-2px);
   }
   

   .healthDataEntries .card {
       background: rgba(255, 255, 255, 0.7);
       backdrop-filter: blur(10px);
       border: 1px solid rgba(255, 255, 255, 0.5);
       border-radius: 24px;
       overflow: hidden;
       box-shadow: 0 8px 32px rgba(102, 126, 234, 0.12);
       margin-bottom: 2rem;
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       animation: cardSlideIn 0.6s ease;
   }
   
   .healthDataEntries .card:hover {
       transform: translateY(-8px);
       box-shadow: 0 16px 48px rgba(102, 126, 234, 0.2);
   }
   
   .healthDataEntries .card-header {
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
       color: white;
       padding: 1.5rem 2rem;
       border: none;
       position: relative;
       overflow: hidden;
   }
   
   .healthDataEntries .card-header::before {
       content: '';
       position: absolute;
       top: -50%;
       left: -50%;
       width: 200%;
       height: 200%;
       background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
   }
   
   .healthDataEntries .card-header > div {
       position: relative;
       z-index: 1;
   }
   
   .card-header .badge.rounded-pill {
       padding: 10px 14px;
       font-size: 0.9rem;
       backdrop-filter: blur(10px);
       border: 2px solid rgba(255, 255, 255, 0.3);
       transition: all 0.3s ease;
   }
   
   .card-header .badge:hover {
       transform: scale(1.15) rotate(5deg);
       border-color: rgba(255, 255, 255, 0.6);
   }
   
   .healthDataEntries .card-body {
       background: transparent !important;
       padding: 2rem !important;
   }
   
   /* Time Entry Cards */
   .time-entry-card {
       background: white !important;
       border: 2px solid rgba(102, 126, 234, 0.15) !important;
       border-radius: 20px !important;
       padding: 1.5rem !important;
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       position: relative;
       overflow: hidden;
   }
   
   .time-entry-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 4px;
       height: 100%;
       background: var(--gradient-primary);
       transform: scaleY(0);
       transition: transform 0.4s ease;
   }
   
   .time-entry-card:hover::before {
       transform: scaleY(1);
   }
   
   .time-entry-card:hover {
       transform: translateY(-8px) scale(1.02);
       box-shadow: 0 12px 32px rgba(102, 126, 234, 0.2);
       border-color: rgba(102, 126, 234, 0.3) !important;
   }
   
   /* Metric Pills */
   .metric-pill {
       border-radius: 16px !important;
       padding: 1rem !important;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       position: relative;
       overflow: hidden;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   }
   
   .metric-pill::after {
       content: '';
       position: absolute;
       top: 0;
       right: 0;
       width: 60px;
       height: 60px;
       border-radius: 50%;
       opacity: 0.1;
       transition: all 0.3s ease;
   }
   
   .metric-pill:nth-child(1) {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    border: 2px solid #60a5fa !important;
   }
   
   .metric-pill:nth-child(1)::after {
       background: #f59e0b;
   }
   
   .metric-pill:nth-child(1):hover {
       background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%) !important;
       transform: translateX(8px);
       box-shadow: 0 8px 20px rgba(251, 191, 36, 0.3);
   }
   
   .metric-pill:nth-child(2) {
       background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
       border: 2px solid #60a5fa !important;
   }
   
   .metric-pill:nth-child(2)::after {
       background: #3b82f6;
   }
   
   .metric-pill:nth-child(2):hover {
       background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%) !important;
       transform: translateX(8px);
       box-shadow: 0 8px 20px rgba(96, 165, 250, 0.3);
   }
   
   .metric-pill:nth-child(3) {
       background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
       border: 2px solid #f87171 !important;
   }
   
   .metric-pill:nth-child(3)::after {
       background: #ef4444;
   }
   
   .metric-pill:nth-child(3):hover {
       background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%) !important;
       transform: translateX(8px);
       box-shadow: 0 8px 20px rgba(248, 113, 113, 0.3);
   }
   
   .metric-pill:nth-child(4) {
       background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
       border: 2px solid #34d399 !important;
   }
   
   .metric-pill:nth-child(4)::after {
       background: #10b981;
   }
   
   .metric-pill:nth-child(4):hover {
       background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 100%) !important;
       transform: translateX(8px);
       box-shadow: 0 8px 20px rgba(52, 211, 153, 0.3);
   }
   
   .metric-icon-sm {
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
       transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   }
   
   .metric-pill:hover .metric-icon-sm {
       transform: scale(1.2) rotate(10deg);
   }
   
   /* Notes Box */
   .notes-box {
       background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%) !important;
       border: 2px dashed rgba(102, 126, 234, 0.3) !important;
       border-radius: 16px !important;
       padding: 1rem !important;
       transition: all 0.3s ease;
       position: relative;
       overflow: hidden;
   }
   
   .notes-box::before {
       content: '📝';
       position: absolute;
       top: 10px;
       right: 10px;
       font-size: 2rem;
       opacity: 0.1;
   }
   
   .time-entry-card:hover .notes-box {
       background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important;
       border-color: rgba(102, 126, 234, 0.5) !important;
       border-style: solid;
   }

   .healthcare-form-container {
       max-width: 900px;
       margin: 2rem auto;
       padding: 0 1rem;
       animation: fadeIn 0.6s ease;
   }
   
   .healthcare-form-card {
       background: white;
       border-radius: 20px;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
       overflow: hidden;
   }
   
   .healthcare-form-header {
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
       padding: 2rem;
       display: flex;
       align-items: center;
       gap: 1rem;
       color: white;
       animation: slideInFromTop 0.6s ease;
   }
   
   .healthcare-form-header i {
       font-size: 2rem;
       filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
       animation: popIn 0.8s ease 0.3s backwards;
   }
   
   .healthcare-form-title {
       margin: 0;
       font-size: 1.75rem;
       font-weight: 700;
       letter-spacing: -0.5px;
   }
   
   .healthcare-form-body {
       padding: 2.5rem;
   }
   
   .healthcare-form {
       width: 100%;
   }
   
   .healthcare-form-row {
       display: flex;
       gap: 1.5rem;
       margin-bottom: 1rem;
   }
   
   .healthcare-form-col-6 {
       flex: 1;
   }
   
   .healthcare-form-group {
       margin-bottom: 1.5rem;
       opacity: 0;
       animation: slideInFromLeft 0.5s ease forwards;
   }
   
   .healthcare-form-group:nth-child(1) { animation-delay: 0.1s; }
   .healthcare-form-group:nth-child(2) { animation-delay: 0.2s; }
   .healthcare-form-group:nth-child(3) { animation-delay: 0.3s; }
   .healthcare-form-group:nth-child(4) { animation-delay: 0.4s; }
   .healthcare-form-group:nth-child(5) { animation-delay: 0.5s; }
   .healthcare-form-group:nth-child(6) { animation-delay: 0.6s; }
   .healthcare-form-group:nth-child(7) { animation-delay: 0.7s; }
   .healthcare-form-group:nth-child(8) { animation-delay: 0.8s; }
   
   .healthcare-form-row .healthcare-form-col-6:first-child .healthcare-form-group {
       animation-name: slideInFromLeft;
   }
   
   .healthcare-form-row .healthcare-form-col-6:last-child .healthcare-form-group {
       animation-name: slideInFromRight;
   }
   
   .healthcare-form-label {
       display: block;
       font-weight: 600;
       color: var(--dark-color);
       margin-bottom: 0.5rem;
       font-size: 0.95rem;
       transform: translateY(0);
       transition: transform 0.2s ease;
   }
   
   .healthcare-form-control,
   .healthcare-form-select,
   .healthcare-form-textarea {
       width: 100%;
       padding: 0.75rem 1rem;
       border: 2px solid #e5e7eb;
       border-radius: 10px;
       font-size: 1rem;
       transition: all 0.3s ease;
       background: white;
       font-family: inherit;
   }
   
   .healthcare-form-control:focus,
   .healthcare-form-select:focus,
   .healthcare-form-textarea:focus {
       outline: none;
       border-color: #667eea;
       box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
       transform: translateY(-2px);
   }
   
   .healthcare-form-control:hover,
   .healthcare-form-select:hover,
   .healthcare-form-textarea:hover {
       border-color: #667eea;
   }
   
   .healthcare-form-textarea {
       resize: vertical;
       min-height: 100px;
   }
   
   .healthcare-form-text {
       font-size: 0.875rem;
       color: var(--secondary-color);
       margin-top: 0.5rem;
       display: flex;
       align-items: center;
       gap: 0.25rem;
       opacity: 0;
       animation: fadeInUp 0.4s ease forwards;
       animation-delay: 0.3s;
   }
   
   .healthcare-form-text i {
       color: #667eea;
   }
   
   .error-message {
       color: var(--danger-color);
       font-size: 0.875rem;
       margin-top: 0.25rem;
       display: flex;
       align-items: center;
       gap: 0.25rem;
       animation: shake 0.5s ease;
   }
   
   .error-message::before {
       content: "⚠";
   }
   
   .healthcare-form-actions {
       display: flex;
       gap: 1rem;
       justify-content: center;
       margin-top: 2rem;
       padding-top: 2rem;
       border-top: 2px solid #f3f4f6;
       opacity: 0;
    
       animation: slideInFromBottom 0.5s ease forwards 0.9s;
   }
   
   .healthcare-btn {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.75rem 1.5rem;
       border-radius: 10px;
       font-weight: 600;
       font-size: 1rem;
       text-decoration: none;
       transition: all 0.3s ease;
       border: none;
       cursor: pointer;
       white-space: nowrap;
   }
   
   .healthcare-btn-lg {
       padding: 0.875rem 2rem;
       font-size: 1.05rem;
       color: var(--secondary-color);
   }
   
   .healthcare-btn-secondary {
       background: white;
       color: var(--secondary-color);
       border: 2px solid #e5e7eb;
   }
   
   .healthcare-btn-secondary:hover {
       background: #f9fafb;
       border-color: #667eea;
       color: #667eea;
       transform: translateY(-2px);
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }
   
   .healthcare-btn-info {
       background: var(--gradient-primary);
       color: white;
       border: none;
       box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
   }
   
   .healthcare-btn-info:hover {
       transform: translateY(-2px);
       box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
   }
   
   .healthcare-btn-icon {
       font-size: 0.9rem;
       transition: transform 0.3s ease;
   }
   
   .healthcare-btn:hover .healthcare-btn-icon {
       transform: scale(1.1);
   }
   
   .healthcare-form-select {
       appearance: none;
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667eea' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
       background-repeat: no-repeat;
       background-position: right 1rem center;
       padding-right: 2.5rem;
   }
   
 
   .profile-page-container {
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 3rem 1rem;
       background: var(--gradient-bg);
       min-height: calc(100vh - 200px);
   }
   
   .profile-card {
       background: rgba(255, 255, 255, 0.85);
       backdrop-filter: blur(15px);
       border-radius: 24px;
       box-shadow: 0 12px 40px rgba(102, 126, 234, 0.15);
       padding: 2.5rem;
       max-width: 800px;
       width: 100%;
       animation: fadeIn 0.6s ease;
   }
   
   .profile-header {
       display: flex;
       align-items: center;
       gap: 1.5rem;
       border-bottom: 2px solid rgba(102, 126, 234, 0.1);
       padding-bottom: 1.5rem;
       margin-bottom: 1.5rem;
   }
   
   .profile-avatar {
       width: 90px;
       height: 90px;
       border-radius: 50%;
       background: var(--gradient-primary);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 3rem;
       color: white;
       box-shadow: 0 6px 18px rgba(102, 126, 234, 0.4);
       animation: popIn 0.6s ease;
   }
   
   .profile-header-text h2 {
       margin: 0;
       font-size: 2rem;
       color: var(--dark-color);
   }
   
   .profile-role {
       color: var(--secondary-color);
       font-size: 1rem;
       margin-top: 0.2rem;
   }
   
   .profile-info-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
       gap: 1.5rem;
       margin-top: 1rem;
   }
   
   .info-item {
       background: #f9fafb;
       border-radius: 12px;
       padding: 1.2rem;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
       transition: all 0.3s ease;
   }
   
   .info-item:hover {
       transform: translateY(-4px);
       box-shadow: 0 8px 20px rgba(102, 126, 234, 0.1);
   }
   
   .info-label {
       display: block;
       font-size: 0.8rem;
       font-weight: 700;
       color: #6c757d;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       margin-bottom: 0.4rem;
   }
   
   .info-value {
       font-size: 1.2rem;
       font-weight: 600;
       color: var(--dark-color);
   }
   
   .profile-actions {
       text-align: center;
       margin-top: 2rem;
   }
   
   /* View Profile Table */
   .healthDataEntries.view.content {
       max-width: 800px;
       margin: 2rem auto;
       background: #fff;
       border-radius: 20px;
       padding: 2rem;
       box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
   }
   
   .profile-table {
       display: grid !important;
       grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
       gap: 1.2rem;
       margin: 0;
       padding: 0;
       border: none !important;
   }
   
   .profile-table tr,
   .profile-table th,
   .profile-table td {
       all: unset;
       display: block;
   }
   
   .profile-table tr {
       background: #f9fafb;
       border-radius: 12px;
       padding: 1rem 1.2rem;
       box-shadow: 0 2px 6px rgba(0,0,0,0.05);
       transition: transform 0.2s ease;
   }
   
   .profile-table tr:hover {
       transform: translateY(-2px);
   }

   .profile-table tr:nth-child(1):hover {
    background: var(--gradient-primary) !important;
    color: white !important;
    transform: translateY(-2px);
}
   
   .profile-table th {
       font-size: 0.75rem;
       font-weight: 700;
       color: #6c757d;
       text-transform: uppercase;
       margin-bottom: 0.25rem;
   }
   
   .profile-table td {
       font-size: 1.2rem;
       font-weight: 700;
       color: #212529;
   }
   
   .profile-table tr:nth-child(1) {
       grid-column: span 2;
       text-align: center;
       background: var(--gradient-primary);
       color: white;
       font-size: 1rem;
       font-weight: 600;
   }
   
   .profile-table tr:nth-child(6) {
       grid-column: span 2;
       background: #f8f9fa;
       border: 1px solid #e5e7eb;
       font-style: italic;
       color: #6c757d;
   }
   
   .action-buttons {
       display: flex;
       justify-content: center;
       gap: 1rem;
       margin-top: 2rem;
   }
   
   .action-buttons .btn {
       padding: 0.75rem 1.8rem;
       border-radius: 50px;
       font-weight: 600;
       font-size: 1rem;
       border: none;
       color: #fff !important;
       background: var(--gradient-primary);
       box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
       transition: all 0.3s ease;
   }
   
   .action-buttons .btn:hover {
       transform: translateY(-3px) scale(1.03);
       box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
   }
   
  
   .messages-container {
       padding: 2rem;
       animation: fadeIn 0.6s ease;
   }
   
   .filters-section .card {
       background: rgba(255, 255, 255, 0.8);
       backdrop-filter: blur(12px);
       border: 1px solid rgba(255, 255, 255, 0.4);
       border-radius: 16px;
       box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
       transition: all 0.3s ease;
   }
   
   .filters-section .card:hover {
       transform: translateY(-4px);
       box-shadow: 0 12px 36px rgba(102, 126, 234, 0.25);
   }
   
   .filters-section .card-header {
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
       color: white;
       font-weight: 700;
       letter-spacing: 0.5px;
       padding: 1rem 1.5rem;
       border-radius: 16px 16px 0 0;
       text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   }
   
   .filters-section .form-control {
       border-radius: 10px;
       border: 2px solid rgba(102, 126, 234, 0.25);
       transition: all 0.3s ease;
   }
   
   .filters-section .form-control:focus {
       border-color: #667eea;
       box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
       transform: translateY(-2px);
   }
   
   .date-card {
       background: rgba(255, 255, 255, 0.75);
       backdrop-filter: blur(10px);
       border-radius: 18px;
       border: 1px solid rgba(255, 255, 255, 0.4);
       box-shadow: 0 8px 32px rgba(102, 126, 234, 0.12);
       overflow: visible !important;
       transition: all 0.3s ease;
   }
   
   .date-card:hover {
       transform: translateY(-5px);
       box-shadow: 0 16px 48px rgba(102, 126, 234, 0.25);
   }
   
   .date-card .card-header {
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
       color: white;
       font-weight: 700;
       letter-spacing: 0.5px;
       padding: 1rem 1.5rem;
       border: none;
       text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
       position: relative;
       overflow: hidden;
   }
   
   .date-card .card-header::before {
       content: '';
       position: absolute;
       top: -50%;
       left: -50%;
       width: 200%;
       height: 200%;
       background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
   }
   
   .date-card .card-body {
       padding: 1.2rem 1.8rem !important;
       border-radius: 0 0 18px 18px;
   }
   
   .messages-table {
       background: rgba(255, 255, 255, 0.85);
       border-collapse: separate;
       border-spacing: 0;
       width: 100%;
       border-radius: 12px;
       overflow: hidden;
   }
   
   .messages-table tbody tr {
       transition: all 0.3s ease;
       cursor: pointer;
   }
   
   .messages-table tbody tr:hover {
       background: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(118, 75, 162, 0.08));
       transform: scale(1.01);
       box-shadow: 0 4px 15px rgba(102, 126, 234, 0.15);
   }
   
   .messages-table tbody tr td {
       padding: 1rem 1.2rem !important;
   }
   
   .unread-row {
       background: rgba(102, 126, 234, 0.08);
       border-left: 5px solid #667eea;
   }
   
   .read-row {
       opacity: 0.9;
   }
   
   .message-name {
       font-weight: 700;
       color: var(--dark-color);
   }
   
   .message-status .badge {
       border-radius: 30px;
       font-size: 0.8rem;
       padding: 0.4rem 0.9rem;
       letter-spacing: 0.5px;
       font-weight: 600;
   }
   
   .message-status .bg-primary {
       background: var(--gradient-primary) !important;
       box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
   }
   
   .message-subject {
       color: var(--secondary-color);
       font-weight: 500;
   }
   
   .message-time {
       color: #667eea;
       font-weight: 600;
   }
   
   .message-actions .btn-link {
       color: #667eea;
       transition: transform 0.2s ease;
   }
   
   .message-actions .btn-link:hover {
       transform: scale(1.2);
   }
   
   /* DataTables */
   .dataTables_wrapper {
       background: transparent !important;
       padding: 0 1.5rem 1rem 1.5rem;
   }
   
   .dataTables_filter input {
       border: 2px solid #667eea !important;
       border-radius: 10px;
       padding: 0.5rem 1rem;
       outline: none;
       transition: all 0.3s ease;
       margin-left: 0.5rem;
   }
   
   .dataTables_filter input:focus {
       border-color: #764ba2 !important;
       box-shadow: 0 0 6px rgba(102, 126, 234, 0.4);
   }
   
   .dataTables_length select {
       border: 2px solid #667eea;
       border-radius: 10px;
       padding: 0.4rem 2rem 0.4rem 0.8rem;
       transition: all 0.3s ease;
       margin: 0 0.5rem;
   }
   
   .dataTables_length select:hover {
       border-color: #764ba2;
   }
   
   .dataTables_info {
       color: var(--secondary-color);
       font-weight: 500;
       margin-top: 0.5rem;
   }
   
   .dataTables_paginate {
       margin-bottom: 0.8rem;
   }
   
   .dataTables_filter,
   .dataTables_length {
       margin-bottom: 0.8rem;
   }
   
   .dataTables_wrapper > div:first-child {
       padding-top: 0.8rem;
   }
   
   .paginate_button {
       border-radius: 10px !important;
       background: rgba(255, 255, 255, 0.9) !important;
       border: 1px solid rgba(102, 126, 234, 0.25) !important;
       transition: all 0.3s ease;
   }
   
   .paginate_button:hover {
       background: var(--gradient-primary) !important;
       color: white !important;
       transform: translateY(-2px);
   }
   
   .messages-table_wrapper {
       padding: 1rem 1.5rem;
   }
   
   .messages-table_filter {
       float: right;
       margin-bottom: 1rem;
       margin-right: 0;
   }
   
   .messages-table_length {
       float: left;
       margin-bottom: 1rem;
       margin-left: 0;
   }
   
   .messages-table_wrapper:after {
       content: "";
       display: table;
       clear: both;
   }
   
   .message-row td:first-child {
       padding-left: 2rem;
   }
   
   .message-row td:last-child {
       padding-right: 1.5rem;
   }
   

   .toggle-buttons {
       display: flex !important;
       width: 100%;
       max-width: 600px;
       background: white;
       border-radius: 12px;
       padding: 0.3rem;
       box-shadow: 0 2px 10px rgba(102, 126, 234, 0.15);
       gap: 0.3rem;
       border: 1px solid rgba(102, 126, 234, 0.15);
       margin: 0 auto;
   }
   
   .toggle-buttons .toggle-btn {
       flex: 1;
       border: none !important;
       background: transparent !important;
       font-weight: 600;
       padding: 0.75rem 1.5rem;
       border-radius: 9px;
       transition: all 0.3s ease;
       color: #6c757d;
       cursor: pointer;
       font-size: 0.95rem;
       outline: none !important;
   }
   
   .toggle-buttons .toggle-btn:hover:not(.active) {
       color: #667eea;
       background: rgba(102, 126, 234, 0.08) !important;
   }
   
   .toggle-buttons .toggle-btn.active {
       background: var(--gradient-primary) !important;
       color: white !important;
       box-shadow: 0 2px 8px rgba(102, 126, 234, 0.35);
   }
   
   .toggle-buttons .toggle-btn i {
       margin-right: 0.5rem;
   }
   

   .alert {
       border: none;
       border-radius: 12px;
       box-shadow: var(--shadow-md);
       font-weight: 500;
       animation: slideInRight 0.5s ease;
   }
   
   .healthcare-alert {
       border-radius: 12px;
       padding: 1rem 1.25rem;
       margin-bottom: 1.5rem;
       font-size: 0.95rem;
   }
   
   .auth-alert {
       background: rgba(239, 246, 255, 0.95);
       border: 2px solid rgba(76, 108, 255, 0.2);
       border-radius: 14px;
       padding: 1.2rem;
       font-size: 1.3rem;
       margin-top: 1rem;
       margin-bottom: 2rem;
   }
   
   .auth-alert i {
       color: var(--primary-color);
       margin-right: 0.5rem;
   }
   
 
   footer {
       background: var(--white) !important;
       box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
       margin-top: 4rem !important;
   }
   
   footer p {
       color: var(--secondary-color);
       font-weight: 500;
   }
   
 
   .text-gradient {
       background: var(--gradient-primary);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }
   
   .hover-lift {
       transition: var(--transition-normal);
   }
   
   .hover-lift:hover {
       transform: translateY(-5px);
       box-shadow: var(--shadow-lg);
   }
   
   .loading-spinner {
       width: 50px;
       height: 50px;
       border: 5px solid var(--light-color);
       border-top-color: var(--primary-color);
       border-radius: 50%;
       margin: 2rem auto;
   }
   
   .empty-state {
       text-align: center;
       padding: 5rem 2rem;
   }
   
   .empty-icon {
       font-size: 5rem;
       background: var(--gradient-primary);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       margin-bottom: 1.5rem;
       animation: float 3s ease-in-out infinite;
   }
   
   .empty-state h3 {
       font-size: 1.75rem;
       font-weight: 700;
       color: var(--dark-color);
       margin-bottom: 0.5rem;
   }
   
   .empty-state p {
       color: var(--secondary-color);
       font-size: 1.1rem;
       margin-bottom: 2rem;
   }
   
   .funnel-display-black {
       font-family: 'Funnel Display', sans-serif;
       font-weight: 800;
   }
   
   .funnel-display-bold {
       font-family: 'Funnel Display', sans-serif;
       font-weight: 700;
   }
   
   .funnel-display-medium {
       font-family: 'Funnel Display', sans-serif;
       font-weight: 500;
   }
   
   .questrial-regular {
       font-family: 'Questrial', sans-serif;
       font-weight: 400;
   }
   
   .text-light-blue {
       color: white !important;
   }
   
   .text-dark-blue {
       color: var(--dark-color) !important;
   }
   
   /* Headings */
   aside .heading {
       font-size: 2.5rem;
       font-weight: 800;
       background: var(--gradient-primary);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       margin-bottom: 1.5rem;
       padding-bottom: 0.75rem;
       border-bottom: 3px solid #667eea !important;
   }
   
   /* Users Page */
   .users.index.content {
       padding: 2rem;
       animation: fadeIn 0.6s ease;
   }
   
   .users.index.content h3 {
       color: var(--dark-color);
       font-weight: 800;
       margin-bottom: 1.5rem;
   }
   
   .users.index.content h5 {
       color: var(--dark-color);
       font-weight: 700;
       margin: 2rem 0 1rem 0;
       padding-bottom: 0.5rem;
       border-bottom: 3px solid #667eea;
       display: inline-block;
   }
   
   .element.top-left,
   .element.top-right {
       padding: 1rem;
       vertical-align: middle;
   }
   
   .actions .d-flex {
       gap: 0.5rem;
       justify-content: center;
   }
   
   #patients-table,
   #clinicians-table {
       animation: fadeIn 0.5s ease;
   }
   

   @media (max-width: 1200px) {
       .table-responsive {
           padding: 1rem;
       }
       
       .table thead th,
       .table tbody td {
           padding: 0.75rem 0.5rem;
           font-size: 0.85rem;
       }
   }
   
   @media (max-width: 1024px) {
       .entries-grid {
           grid-template-columns: 1fr;
       }
   }
   
   @media (max-width: 768px) {
       .dashboard-title {
           font-size: 2rem;
       }
       
       .dashboard-subtitle {
           font-size: 1rem;
       }
       
       .dashboard-card {
           margin-bottom: 1.5rem;
       }
       
       .dashboard-card-stats {
           flex-direction: column;
       }
       
       .stat-number {
           font-size: 2rem;
       }
       
       .users.index.content {
           padding: 1rem;
       }
       
       .element.top-left,
       .element.top-right {
           display: block;
           text-align: center !important;
           padding: 0.5rem;
       }
       
       .btn-outline-primary,
       .btn-outline-danger {
           margin: 0.25rem;
           font-size: 0.85rem;
           padding: 0.4rem 0.8rem;
       }
       
       .table {
           font-size: 0.8rem;
       }
       
       .timeline-day {
           grid-template-columns: 60px 1fr;
           gap: 1rem;
       }
       
       .date-circle {
           width: 55px;
           height: 55px;
       }
       
       .day-header {
           flex-direction: column;
           align-items: flex-start;
           gap: 1rem;
       }
       
       .metrics-grid {
           grid-template-columns: 1fr;
       }
       
       .hero-content {
           flex-direction: column;
           align-items: flex-start;
       }
       
       .healthcare-form-container {
           margin: 1rem auto;
       }
       
       .healthcare-form-header {
           padding: 1.5rem;
       }
       
       .healthcare-form-title {
           font-size: 1.5rem;
       }
       
       .healthcare-form-body {
           padding: 1.5rem;
       }
       
       .healthcare-form-row {
           flex-direction: column;
           gap: 0;
       }
       
       .healthcare-form-actions {
           flex-direction: column-reverse;
       }
       
       .healthcare-btn {
           width: 100%;
           justify-content: center;
       }
       
       .profile-card {
           padding: 1.5rem;
       }
       
       .profile-header {
           flex-direction: column;
           text-align: center;
       }
       
       .profile-avatar {
           width: 80px;
           height: 80px;
       }
       
       .healthDataEntries.index.content {
           padding: 1rem;
       }
       
       .healthDataEntries .card {
           border-radius: 16px;
       }
       
       .time-entry-card {
           margin-bottom: 1.5rem;
       }
       
       .filters-section .card {
           padding: 0.5rem;
       }
       
       .filters-section .card-body .col-md-3,
       .filters-section .card-body .col-md-2 {
           width: 100%;
           margin-bottom: 1rem;
       }
       
       .date-card .card-header {
           font-size: 1rem;
           text-align: center;
       }
       
       .messages-table td {
           font-size: 0.9rem;
       }
       
       .profile-table th,
       .profile-table td {
           display: block;
           width: 100%;
           padding: 0.75rem 1rem;
       }
       
       .profile-table tr {
           display: block;
           margin-bottom: 1rem;
       }
       
       .profile-table th {
           border-right: none;
           border-bottom: 1px solid rgba(102,126,234,0.1);
           margin-bottom: 0.5rem;
       }
   }
   
   @media (max-width: 600px) {
       .healthDataEntries.view.content {
           max-width: 95%;
           padding: 1rem;
       }
       
       .profile-table {
           grid-template-columns: 1fr;
       }
       
       .profile-table tr:nth-child(5),
       .profile-table tr:nth-child(6) {
           grid-column: span 1;
       }
   }
   
  
   @media (prefers-color-scheme: dark) {
       body {
           background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
           color: var(--light-color);
       }
       
       .dashboard-card {
           background: #2a2a3e;
           color: var(--light-color);
       }
       
       .dashboard-card-stats > div {
           background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
       }
       
       .dashboard-card-title {
           color: var(--light-color);
       }
       
       footer {
           background: #2a2a3e !important;
       }
   }
   
   .same-btn svg {
    fill: white;
    transition: fill 0.3s ease;
  }


  /* ====== ACTION BUTTON TOGGLE ====== */
.action-toggle-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white !important;
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  }
  
  .action-toggle-btn:hover {
    background: linear-gradient(135deg, #5b6de0, #6b4e9c);
    transform: scale(1.05);
  }
  
  /* ====== DROPDOWN MENU ====== */
  .action-menu {
    border-radius: 12px !important;
    padding: 0.4rem 0 !important;
    overflow: hidden;
  }
  
  /* ====== MENU ITEMS ====== */
  .action-item {
    display: flex;
    align-items: center;
    font-weight: 500;
    padding: 0.6rem 1.2rem;
    color: #333 !important;
    transition: all 0.2s ease;
  }
  
  .action-item:hover {
    background-color: #f1f3ff !important;
    color: #4C6CFF !important;
  }
  
  .action-item.text-danger:hover {
    background-color: #ffe8e8 !important;
    color: #d63031 !important;
  }
  
  /* ====== ICON STYLE ====== */
  .action-item .material-symbols-outlined {
    font-size: 18px;
    vertical-align: middle;
  }

 

  /* === CONTAINER === */
.message-view-container {
    background: #f9fbff;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    padding: 2rem;
    max-width: 900px;
    margin: 2rem auto;
    font-family: "Inter", "Poppins", sans-serif;
    color: #222;
  }
  
  /* === HEADER === */
  .message-header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 1.5rem;
    border-radius: 16px;
    box-shadow: 0 5px 15px rgba(102,126,234,0.25);
  }
  
  .sender-avatar {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
  }
  
  .sender-info h2 {
    margin: 0;
    font-weight: 700;
    font-size: 1.4rem;
  }
  
  .sender-info p {
    margin: 0;
    font-size: 0.95rem;
    opacity: 0.9;
  }
  
  /* === MESSAGE BODY === */
  .message-body {
    margin-top: 2rem;
  }
  
  .message-body h4 {
    color: #444;
    margin-bottom: 0.8rem;
    font-weight: 600;
  }
  
  .message-bubble {
    background: white;
    border-radius: 16px;
    padding: 1.2rem 1.5rem;
    line-height: 1.6;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-left: 4px solid #667eea;
  }
  
  /* === DETAILS GRID === */
  .message-details {
    margin-top: 2rem;
  }
  
  .message-details h4 {
    color: #444;
    margin-bottom: 1rem;
    font-weight: 600;
  }
  
  .details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.8rem;
  }
  
  .details-grid div {
    background: #fff;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    font-size: 0.95rem;
  }
  
  .details-grid span {
    display: block;
    font-weight: 600;
    color: #667eea;
    margin-bottom: 0.2rem;
  }
  
  /* === ACTION BUTTONS === */
  .message-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2.5rem;
  }
  
  .btn {
    border: none;
    border-radius: 25px;
    padding: 0.6rem 1.6rem;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.25s ease;
    color: white !important;
    text-decoration: none;
  }
  
  .btn-return {
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 4px 10px rgba(102,126,234,0.25);
  }
  .btn-return:hover {
    background: linear-gradient(135deg, #5a6be2, #6d53a5);
    transform: translateY(-2px);
  }
  
  .btn-reply {
    background: linear-gradient(135deg, #6ee7b7, #3b82f6);
    box-shadow: 0 4px 10px rgba(62, 180, 137, 0.25);
  }
  .btn-reply:hover {
    transform: translateY(-2px);
  }
  
  

  @media (max-width: 768px) {
    .message-view-container {
      padding: 1.5rem;
    }
    .sender-avatar {
      width: 48px;
      height: 48px;
      font-size: 1.4rem;
    }
  }

  
.btn-gradient-primary {
    background: linear-gradient(90deg, #6574ff, #8563ff);
    border: none;
    color: #fff !important;
    font-weight: 600;
    border-radius: 30px;
    padding: 0.55rem 1.4rem;
    box-shadow: 0 3px 10px rgba(101, 116, 255, 0.25);
    transition: all 0.25s ease;
  }
  
  .btn-gradient-primary:hover {
    background: linear-gradient(90deg, #5a66e0, #795aff);
    transform: translateY(-2px);
  }
  

  .btn-gradient-clear {
    background: #f1f3fa;
    color: #333 !important;
    border-radius: 30px;
    font-weight: 600;
    padding: 0.55rem 1.4rem;
    border: 1px solid #d9dcec;
    transition: all 0.25s ease;
  }
  
  .btn-gradient-clear:hover {
    background: #fff;
    box-shadow: 0 3px 6px rgba(0,0,0,0.08);
  }
  
  .card {
    overflow: visible !important;
  }
  
  .material-symbols-outlined {
    font-size: 18px;
    vertical-align: middle;
  }