/* Client Dashboard v2 — Base (scoped) */
#va-client-dashboard {
  --primary-color: #6B46C1;
  --light-purple: #F3E8FF;
  --light-green: #F0FFF4;
  --green-text: #276749;
  --gray-50: #F9FAFB;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-800: #1F2937;
  --gray-900: #111827;
  --white: #FFFFFF;
  --red: #EF4444;
  --blue-500: #3B82F6;
  --red-500: #EF4444;
  --green-500: #10B981;
  --yellow-500: #F59E0B;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --border-radius-xl: 0.75rem;
  --border-radius-2xl: 1rem;
  --border-radius-3xl: 1.5rem;
  --border-radius-4xl: 2rem;
  color: var(--gray-800);
  -webkit-tap-highlight-color: transparent;
}

#va-client-dashboard * { box-sizing: border-box; }

#va-client-dashboard .dashboard-container {
  max-width: 512px;
  margin: 0 auto;
  padding-bottom: 1.5rem;
}

#va-client-dashboard .screen { display: none; animation: va-fade-in 0.3s ease-out; }
#va-client-dashboard .screen.active { display: block; }

@keyframes va-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

#va-client-dashboard .dashboard-header {
  display: flex; 
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 1rem;
  gap: 1rem;
}

/* Header Left Section */
#va-client-dashboard .header-left {
  flex: 1 1 auto;
  min-width: 0; /* Allow text truncation if needed */
}

#va-client-dashboard .header-title { 
  font-size: 1.875rem; 
  font-weight: 700; 
  color: var(--gray-900); 
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#va-client-dashboard .header-title .user-name { 
  color: var(--primary-color); 
}

/* Header Right Section */
#va-client-dashboard .header-right {
  flex: 0 0 auto; /* Don't grow or shrink */
}

#va-client-dashboard .header-actions { 
  display: flex; 
  align-items: center; 
  gap: 0.5rem; 
}
#va-client-dashboard .header-button { width: 2.5rem; height: 2.5rem; background-color: var(--gray-200); border-radius: 9999px; display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; position:relative; }
#va-client-dashboard .header-button i { font-size: 1.25rem; color: var(--gray-600); }
#va-client-dashboard #notification-badge { position:absolute; top:0.25rem; right:0.25rem; width:0.5rem; height:0.5rem; background-color: var(--red); border-radius: 9999px; display:none; }
#va-client-dashboard #notification-badge.visible { display:block; }

#va-client-dashboard .pet-selector-wrapper { padding: 0 1.5rem; margin-bottom: 1.5rem; }
#va-client-dashboard .pet-selector-button { display:flex; align-items:center; gap:0.75rem; padding:0.75rem; background-color: var(--white); border-radius: var(--border-radius-2xl); box-shadow: var(--shadow-sm); width:100%; border:none; cursor:pointer; text-align:left; }
#va-client-dashboard .pet-avatar { width:3rem; height:3rem; border-radius: var(--border-radius-xl); display:flex; align-items:center; justify-content:center; font-size:1.5rem; background-color: var(--light-purple); color: var(--primary-color); flex-shrink:0; }
#va-client-dashboard .pet-info { flex-grow:1; }
#va-client-dashboard .pet-name-display { font-size:1.125rem; font-weight:700; color: var(--gray-900); }
#va-client-dashboard .pet-species-display { font-size:0.875rem; color: var(--gray-500); }
#va-client-dashboard .pet-selector-caret i { font-size:1.5rem; color: var(--gray-400); }

#va-client-dashboard .card-wrapper { padding: 0 1.5rem; margin-bottom: 1.5rem; }
#va-client-dashboard .card { background-color: var(--white); padding: 1.25rem; border-radius: var(--border-radius-3xl); box-shadow: var(--shadow-sm); }

#va-client-dashboard .metrics-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
#va-client-dashboard .metric-item { background-color: var(--white); padding:1rem; border-radius: var(--border-radius-3xl); box-shadow: var(--shadow-sm); }
#va-client-dashboard .metric-item i { font-size:1.5rem; margin-bottom:0.5rem; display:block; }
#va-client-dashboard .metric-item .label { font-size:0.875rem; color: var(--gray-500); }
#va-client-dashboard .metric-item .value { font-size:1rem; font-weight:700; }

#va-client-dashboard .quick-access-wrapper { padding: 0 1.5rem; }
#va-client-dashboard .quick-access-title { font-size:1.25rem; font-weight:700; color: var(--gray-800); margin-bottom:1rem; }
#va-client-dashboard .quick-access-links { display:flex; flex-direction:column; gap:1rem; }
#va-client-dashboard .access-link { display:flex; align-items:center; gap:1rem; padding:1.25rem; background-color: var(--white); border-radius: var(--border-radius-3xl); box-shadow: var(--shadow-sm); text-decoration:none; cursor:pointer; }
#va-client-dashboard .access-link-icon { width:3rem; height:3rem; border-radius: var(--border-radius-xl); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#va-client-dashboard .access-link-icon.history { background-color: var(--light-purple); color: var(--primary-color); }
#va-client-dashboard .access-link-icon.add-entry { background-color: var(--light-green); color: var(--green-text); }
#va-client-dashboard .access-link-text .title { font-weight:700; color: var(--gray-800); }
#va-client-dashboard .access-link-text .subtitle { font-size:0.875rem; color: var(--gray-500); }

/* Filters and timeline */
#va-client-dashboard .history-header { display:grid; grid-template-columns:auto 1fr auto; align-items:center; padding:1.5rem 1.5rem 1rem; }
#va-client-dashboard .back-button { width:2.5rem; height:2.5rem; display:flex; align-items:center; justify-content:center; border:none; background:none; cursor:pointer; margin-left:-0.5rem; }
#va-client-dashboard .back-button i { font-size:1.5rem; color: var(--gray-600); }
#va-client-dashboard .history-title { font-size:1.25rem; font-weight:700; color: var(--gray-900); text-align:center; white-space:nowrap; }
#va-client-dashboard .date-filter-wrapper { position:relative; justify-self:end; }
#va-client-dashboard #date-filter-toggle { width:2.5rem; height:2.5rem; background-color: var(--white); border:1px solid var(--gray-200); border-radius:9999px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
#va-client-dashboard #date-filter-toggle i { font-size:1.25rem; color: var(--gray-600); }
#va-client-dashboard #date-filter-popup { position:absolute; right:0; top:3rem; background-color: var(--white); border-radius: var(--border-radius-2xl); box-shadow: var(--shadow-lg); padding:1rem; width:256px; z-index:10; display:none; }
#va-client-dashboard #date-filter-popup.visible { display:block; }
#va-client-dashboard .date-filter-inputs { display:flex; flex-direction:column; gap:0.5rem; }
#va-client-dashboard .date-filter-inputs label { font-size:0.75rem; color: var(--gray-500); }
#va-client-dashboard .date-filter-inputs input[type="date"] { width:100%; font-size:0.875rem; border:1px solid var(--gray-300); border-radius:0.375rem; padding:0.25rem; }
#va-client-dashboard #clear-date-filter { width:100%; text-align:center; font-size:0.75rem; color: var(--red); margin-top:0.5rem; background:none; border:none; cursor:pointer; }

#va-client-dashboard .filters-wrapper { padding:0 1.5rem 1rem; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; }
#va-client-dashboard .filters-wrapper::-webkit-scrollbar { display:none; }
#va-client-dashboard #filter-container { display:flex; gap:0.5rem; }
#va-client-dashboard .filter-button { padding:0.5rem 1rem; border-radius:9999px; font-weight:500; font-size:0.875rem; transition:all 0.2s; white-space:nowrap; border:1px solid var(--gray-200); background-color: var(--white); color: var(--gray-800); cursor:pointer; }
#va-client-dashboard .filter-button.active { background-color: var(--primary-color); color: var(--white); border-color: var(--primary-color); box-shadow: var(--shadow-sm); }

#va-client-dashboard .timeline-wrapper { padding:0 1.5rem; }
#va-client-dashboard .timeline { position:relative; }
#va-client-dashboard .timeline-line { position:absolute; top:0; bottom:0; left:0.5rem; width:2px; background-color: var(--gray-300); border-radius:9999px; margin-left:-1px; }
#va-client-dashboard .timeline-item { position:relative; margin-bottom:1rem; padding-left:2rem; }
#va-client-dashboard .timeline-marker { position:absolute; left:0; top:0.5rem; width:1rem; height:1rem; border-radius:9999px; background-color: var(--primary-color); border:2px solid var(--white); }
#va-client-dashboard .timeline-card { background-color: var(--white); border-radius: var(--border-radius-2xl); padding:1rem; }
#va-client-dashboard .timeline-card .date { font-size:0.75rem; color: var(--gray-500); font-weight:500; margin-bottom:0.25rem; }
#va-client-dashboard .timeline-card .title { font-weight:700; color: var(--gray-800); margin:0; }
#va-client-dashboard .timeline-card .description { font-size:0.875rem; color: var(--gray-600); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; margin:0.25rem 0 0; }

#va-client-dashboard #pagination-controls { display:flex; justify-content:space-between; align-items:center; margin-top:1.5rem; }
#va-client-dashboard .pagination-button { padding:0.25rem 0.75rem; font-size:0.875rem; font-weight:500; background-color: var(--white); border:1px solid var(--gray-300); border-radius:0.5rem; cursor:pointer; }
#va-client-dashboard .pagination-button:disabled { opacity:0.5; cursor:not-allowed; }
#va-client-dashboard .page-info { font-size:0.875rem; color: var(--gray-600); }
#va-client-dashboard .no-records-message { text-align:center; color: var(--gray-500); padding:2rem; }

/* Responsive tweaks for small screens */
@media (max-width: 480px) {
  #va-client-dashboard .dashboard-header {
    padding: 1.25rem 1rem 1rem;
    gap: 0.75rem;
  }
  
  #va-client-dashboard .header-title { 
    font-size: 1.5rem; 
  }
  
  #va-client-dashboard .header-button { 
    width: 2.25rem; 
    height: 2.25rem; 
  }
  
  #va-client-dashboard .header-button i { 
    font-size: 1.125rem; 
  }
}

@media (max-width: 380px) {
  #va-client-dashboard .dashboard-header {
    padding: 1rem 0.75rem 0.75rem;
    gap: 0.5rem;
  }
  
  #va-client-dashboard .header-title { 
    font-size: 1.375rem; 
  }
  
  #va-client-dashboard .header-button { 
    width: 2rem; 
    height: 2rem; 
  }
  
  #va-client-dashboard .header-button i { 
    font-size: 1rem; 
  }
  
  #va-client-dashboard .header-actions {
    gap: 0.375rem;
  }
}

/* Large screens optimization */
@media (min-width: 768px) {
  #va-client-dashboard .dashboard-header {
    padding: 2rem 2rem 1.5rem;
    gap: 1.5rem;
  }
  
  #va-client-dashboard .header-title { 
    font-size: 2.25rem; 
  }
  
  #va-client-dashboard .header-button { 
    width: 3rem; 
    height: 3rem; 
  }
  
  #va-client-dashboard .header-button i { 
    font-size: 1.5rem; 
  }
  
  #va-client-dashboard .header-actions {
    gap: 0.75rem;
  }
}

/* Forms */
#va-client-dashboard form { display:flex; flex-direction:column; gap:1rem; }
#va-client-dashboard form label { display:block; font-size:0.875rem; font-weight:500; color: var(--gray-600); margin-bottom:0.25rem; }
#va-client-dashboard form input,
#va-client-dashboard form select,
#va-client-dashboard form textarea { width:100%; padding:0.75rem 1rem; background-color: var(--white); border:1px solid var(--gray-300); border-radius: var(--border-radius-xl); }
#va-client-dashboard form input:focus,
#va-client-dashboard form select:focus,
#va-client-dashboard form textarea:focus { outline:2px solid transparent; outline-offset:2px; border-color: var(--primary-color); }
#va-client-dashboard form button[type="submit"] { width:100%; background-color: var(--primary-color); color: var(--white); font-weight:700; padding:0.875rem; border-radius: var(--border-radius-xl); border:none; cursor:pointer; transition: background-color 0.3s; }
#va-client-dashboard form button[type="submit"]:hover { background-color:#5B21B6; }

/* Toast */
#va-client-dashboard #toast { position:fixed; bottom:-100px; left:50%; transform:translateX(-50%); z-index:60; background-color: var(--gray-800); color: var(--white); font-size:0.875rem; padding:0.5rem 1rem; border-radius: var(--border-radius-xl); transition: all 0.3s ease-in-out; }
#va-client-dashboard #toast.show { bottom:20px; }

/* Notifications */
#va-client-dashboard #notifications-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.75rem; }
#va-client-dashboard .notification-item { display:flex; align-items:center; gap:1rem; padding:0.75rem; background-color: var(--white); border-radius: var(--border-radius-2xl); box-shadow: var(--shadow-sm); }
#va-client-dashboard .notification-icon { width:3rem; height:3rem; border-radius: var(--border-radius-xl); display:flex; align-items:center; justify-content:center; flex-shrink:0; background-color:#EBF8FF; color:#3B82F6; }
#va-client-dashboard .notification-icon i { font-size:1.5rem; }
#va-client-dashboard .notification-text .title { font-weight:700; color: var(--gray-800); }
#va-client-dashboard .notification-text .subtitle { font-size:0.875rem; color: var(--gray-600); }
#va-client-dashboard .no-notifications { text-align:center; color: var(--gray-500); padding:2rem; }