/* Header container is outside auth container so it can be shown in dashboard as well
that's why used a fixed height of 110px and also added padding top in petlist to show its content
we also add padding bottom to petlist to avoid footer covering the end of petcards, so now
everything shows nicely between header and footer */

/* ===== GLOBAL STYLES ===== */
:root {

  /* ===== MAIN COLORS ===== */
  --main-color: #2C3E50;         /* Charcoal - For headers/footers */
  --secondary-color: #FFFFFF;    /* Pure White - For cards/backgrounds */  
  --accent-color: #FFD700;       /* Gold - For accents/buttons/borders */

  /* ===== BACKGROUND COLORS ===== */
  --bg-page: #F5F5F5;            /* Light Gray - Page background */
  --bg-card: #FFFFFF;            /* White - Card backgrounds */

  /* ===== BORDER COLORS ===== */
  --border-main: #FFD700;        /* Gold - Main borders (header/footer) */
  --border-card: #E0E0E0;        /* Light Gray - Card borders */
  --border-button: #FFD700;      /* Gold - Button borders */

  /* ===== TEXT COLORS ===== */  
  --text-main: #333333;          /* Dark Gray - Primary text */
  --text-light: #666666;         /* Medium Gray - Secondary text */
  --text-inverse: #FFFFFF;       /* White - Text on dark backgrounds */
  --text-accent: #FFD700;        /* Gold - Accent text */

  /* ===== STATUS COLORS ===== */
  --success: #28A745;            /* Green - Success messages */
  --error: #DC3545;              /* Red - Error messages */
  --warning: #FFC107;            /* Yellow - Warnings */

  /*============================== added new ================================*/
  --accent-green: #4caf50;        /* light green fpr positive enhancement*/


  /* AUTHENTICATION PALETTE (OLD preserved) */
  --primary-color: #3498db;
  --primary-dark: #2980b9;
  --secondary-color: #27ae60;
  --secondary-dark: #219a52;
  --light-bg: #f5f5f5;
  --card-bg: #f9f9f9;
  --border-color: #ddd;
  --qr-blue: #3498db;
  --qr-green: #27ae60;
  --link-blue: #3498db;
  
  /* Base Colors */
  --pure-white: #FFFFFF;
  --pure-black: #000000;
  
  /* Text Colors */
  --text-primary: #333333;    /* Dark gray for main text */
  --text-secondary: #666666;  /* Medium gray for secondary text */
  --text-light: #999999;      /* Light gray for subtle text */
  --text-inverse: #FFFFFF;    /* White text for dark backgrounds */
  --error-color: #e74c3c;
  --text-color: #333;
    /* Gold Text Color */
  --gold-text: #FFD700; /* ← Add this line */
  
  /* Background Colors */
  --bg-primary: #FFFFFF;      /* Main white background */
  --bg-secondary: #F8F9FA;    /* Light gray background */
  --bg-dark: #333333;         /* Dark background for contrast */
  --bg-page: #F5F5F5;       /* Page background */
  --card-bg: #FFFFFF;       /* PetCard background */
  --card-border: #E0E0E0;   /* PetCard border */

  /* Status Colors */
  --success: #28A745;         /* Green for success */
  --warning: #FFC107;         /* Yellow for warnings */
  --error: #DC3545;           /* Red for errors */
  --info: #17A2B8;            /* Blue for information */

  
    /* Charcoal & Teal Scheme */
  --charcoal: #36454F;
  --teal-accent: #17BECF;
  /* Deep Purple & Silver Scheme */
  --deep-purple: #4B0082;
  --silver-metallic: #C0C0C0;
  /* Forest Green & Cream Scheme */
  --forest-green: #2E4C3C;
  --cream-accent: #D4B483;
  /* Navy & Gold Scheme */
  --dark-navy: #1A2238;
  --gold-accent: #FFD700;
  /* Burgundy & Champagne Scheme */
  --burgundy: #6D2E46;
  --champagne: #E8D6CB;  
  
  /* DASHBOARD ADDITIONS */
  --mustard: #f4c542;
  --purple: #7e57c2;
  --purple-dark: #5e35b1;
  --green: #43a047;
  --red: #e74c3c;
  --darkred: #8B0000; /* Or your preferred value */
  --header-height: 110px; /* base desktop value */ 
}

/* Beginning */
.background-container {
  background-color: var(--light-bg); /* subtle, soft background */
  min-height: 100vh; /* ensure it fills the viewport */
  padding: 1rem 0;   /* optional vertical spacing */
}

/* untouchable  rules*/
.hidden { display: none !important; }
.visible { display: block !important; }
#authContainer.hidden { display: none !important; }


/* Optional footer styles */
footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0;
  width: 100%;
  height: 5vh !important;
  background-color: var(--main-color);        /* Charcoal */
  color: var(--text-inverse);                 /* White text */
  text-align: center !important;
 padding: 0.5rem !important;
  font-size: 1rem;
  margin-top: 20px;  /* 0*/
  z-index: 10 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-top: 2px solid var(--border-main); /* Gold border */
}


footer p, footer .legal-links {
  margin: 0.3rem 0; /* Control spacing between elements */
}

.legal-links {
  display: flex;
  gap: 1rem; /* Space between links */
  justify-content: center;
  flex-wrap: wrap; /* Allow wrapping on small screens */
}

/* ===== HEADER style ===== */
/* outside Authentication container */
.header-container {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  padding: 10px 0 !important;
  width: 100%;
  height: var(--header-height); /* important maybe*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--main-color);        /* Charcoal */
  z-index: 10 !important;
  margin: 0 !important;
  box-sizing: border-box;
  border-bottom: 3px solid var(--border-main); /* Gold border */
}

.header-container h1 {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--text-inverse);                 /* White text */
  padding-top:10px;
  text-align: center;
  margin: 0;
}

.header-container h2 {
  font-size: 1.5rem;
  color: var(--text-inverse);                 /* White text */
  text-align: center;
  margin-bottom: 5px; /* to adjust*/
  line-height: 1.3;
}

/*================================
KEEP THIS TO ENSURE AUTH CONTAINER AND DASHBOARD STARTS UNDER THE HEADER
=================================================*/
#authContainer, #dashboard {
  padding-top: var(--header-height); /* pushes content below header */
}
/* ===== AUTH SECTION===== */
#authContainer {
  position: fixed !important;
  height: 85vh;  /* still defines logical space if needed */
/*  top: 12vh;  */   /* keeps it starting below header if you need flow DEFINED UP */
  box-sizing: border-box;
  z-index: 10 !important;    /* lower than fixed children */
}

/* ===== AUTH WELCOME SECTION (CURTAIN) ===== */
.auth-welcome-section {
  position: fixed !important;
  top: var(--header-height); /* IMPORTANT MAYBE*/
  left: 0;
  width: 100%;
  height: 15vh !important;
  background-color: var(--bg-page);
  margin: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex;
  justify-content: center !important; /* horizontally center content */
  align-items: center !important;  /* vertically center content */
  text-align: center;
  box-sizing: border-box;
  z-index: 10 !important;    /* lower than fixed children */  
}


/* for WELCOME LOTTIE */
.pet-animation-container {
  width: 100%;
  height: 100%;
  max-width: 600px;
  border-radius: 12px;
  overflow: hidden;
  background-color: transparent;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  justify-content: center !important; /* horizontally center content */
  align-items: center !important;  /* vertically center content */
  text-align: center;
}

/* ===== FULLPAGE BANNER (BACKGROUND) ===== */
.fullpage-lottie-container {
  position: fixed !important;
  top: calc(var(--header-height) + 15vh); /* new calculation*/
  left: 0;
  width: 100%;
  height: 71vh !important;
  margin: 0;
  overflow: hidden;
  z-index: 10 !important;    /* lower than fixed children */
}

/* ===== GOOGLE SIGN-IN BUTTON ===== */
  /* moved back inside Authentication container/ to check for visibility issues due to verflow hidden*/
/* ===== GOOGLE SIGN-IN BUTTON WRAPPER AS FOOD BOWL ===== */
#googleSignInBtnWrapper {
  position: fixed !important;
  bottom: 6vh !important;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 15px;
  border: 3px solid var(--main-color);       /* Charcoal border FOR A DARKER LOOK*/
  background: linear-gradient(to bottom, #e0e0e0, #c8c8c8); /* light aluminium look */
  border-radius: 50% / 20%;  /* shallow ellipse, bowl-like */
  box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* subtle 3D effect */
  animation: wrapperWave 6s infinite ease-in-out; /* gentle wave */
}

/* ===== Bouncing Ball ===== */
.bouncing-ball {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid var(--border-button);       /* Gold border */
  background: radial-gradient(circle at 30% 30%, #ffffff, #4285f4);
  box-shadow: 0 4px 15px rgba(66, 133, 244, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  animation: bounce 3s infinite ease-in-out; /* slower bounce */
}

/* ===== Keyframes ===== */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); } /* smaller, gentle bounce */
}

@keyframes wrapperWave {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  25% { transform: translateX(-49%) translateY(-3px); }
  50% { transform: translateX(-51%) translateY(3px); }
  75% { transform: translateX(-50%) translateY(-2px); }
}

/* Legal links inside auth wrapper (Google bowl) */
#googleSignInBtnWrapper .legal-links a,
#googleSignInBtnWrapper .auth-legal a {
  color: #5A6268; /* Muted gray-blue that complements aluminum */
  font-weight: 500;
}

#googleSignInBtnWrapper .legal-links a:hover,
#googleSignInBtnWrapper .auth-legal a:hover {
  color: var(--text-main); /* Dark gray on hover */
  text-decoration: underline;
}

/*===========================
FOR PRIVACY AND TERMS HTMLS
/* Legal Links Styling */
============================*/
/* the colours here for legal links a and legal links hover and auth legal will
affect their colour in the footer */
.legal-links {
    margin-top: 10px;
    font-size: 1rem;
}

.legal-links a {
    color: var(--text-accent); /* gold accent text*/
    text-decoration: none;
}

.legal-links a:hover {
    text-decoration: underline;
}

.auth-message {
  color: var(--text-main);                    /* Dark gray text */;
  font-size: 0.9rem;
  margin: 0;
}

.auth-legal {
  font-size: 0.8rem;
  color: var(--text-main);                    /* Dark gray text */;
  max-width: 280px;
  margin: 0;
}

.auth-legal a {
  color: var(--text-accent);
  text-decoration: none;
}

.auth-legal a:hover {
  text-decoration: underline;
}

.auth-message, .auth-legal {
  text-align: center;          /* center text inside container */
}

/*==== Email & password authentication =====*/
/* ====== Sign-Up Floating Ball ===== */
#emailSignupWrapper {
  position: fixed;
  top: calc(var(--header-height) + 15vh + 10px); /* just below welcome Lottie */
  right: 20px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* keep content at top inside the ball */
  z-index: 12; /* above fullPageBanner */
  padding: 10px;    /* smaller padding why 8 */
  text-align: center;
  cursor: pointer;
  animation: slowBounce 4s infinite ease-in-out;
  /* Smooth transition when swapping modes */
  transition: background 0.8s ease, border 0.8s ease, transform 0.5s ease;
}


/* Inputs inside signup ball */
#emailSignupWrapper input {
  width: 80%;
  margin: 1px 0;/* was 2px */
  padding: 3px 4px;/* was 4px 6px */
  border-radius: 8px;
  border: 1px solid var(--main-color);
  font-size: 0.75rem; /* slightly smaller text */
}

/* Buttons inside signup ball */
#emailSignupWrapper button {
  margin-top: 2px;    /* was 4px */
  padding: 3px 4px;   /* was 4px 6px */
  width: 60%;
  font-size: 0.75rem; /* slightly smaller */
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background-color 0.5s ease, color 0.5s ease;
}

/* Legal text inside signup ball */
#emailSignupWrapper .auth-legal {
  font-size: 0.55rem; /* slightly smaller */
  margin-top: 2px;    /* was 4px */
  color: var(--text-main);
  line-height: 1;     /* keep tight */
}

#emailSignupWrapper .auth-switch {
  font-size: 0.55rem;      /* smaller text */
  margin: 2px 0;           /* less vertical space */
  line-height: 1;           /* tight line spacing */
}

#emailSignupWrapper .auth-switch a {
  font-size: 0.55rem;      /* scale the link to match */
  text-decoration: underline;
  cursor: pointer;
}

/* added now. signup here ⬇️*/
#emailSignupWrapper .auth-message {
  color: var(--text-main);                    /* Dark gray text */;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

/* Sign-Up mode style */
#emailSignupWrapper.signup-mode {
  background: radial-gradient(circle at 30% 30%, #ffffff, var(--accent-green));
  border: 3px solid var(--success);
  transform: scale(1.05); /* slightly pop out */
}

#emailSignupWrapper.signup-mode button {
  background-color: var(--accent-green);
  color: var(--text-inverse);
}


/* ====== Sign-In Floating Ball ===== */
#emailLoginWrapper {
  position: fixed;
  top: calc(var(--header-height) + 15vh + 10px);
  right: 20px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 12;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  animation: slowBounce 4s infinite ease-in-out;

  /* Smooth transition for swapping styles */
  transition: background 0.8s ease, border 0.8s ease, transform 0.5s ease;
}

/* Inputs inside ball */
#emailLoginWrapper input {
  width: 80%;
  margin: 2px 0;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid var(--main-color);
  font-size: 0.8rem;
}

/* Buttons inside ball */
#emailLoginWrapper button {
  margin-top: 4px;
  padding: 4px 6px;
  width: 60%;
  font-size: 0.8rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background-color 0.5s ease, color 0.5s ease;
}

/* Legal text inside */
#emailLoginWrapper .auth-legal {
  font-size: 0.6rem;
  margin-top: 4px;
  color: var(--text-main);
  line-height: 1;
}
#emailLoginWrapper .auth-switch {
  font-size: 0.55rem;
  margin: 2px 0;
  line-height: 1;
}

#emailLoginWrapper .auth-switch a {
  font-size: 0.55rem;
  text-decoration: underline;
  cursor: pointer;
}


/* Sign-In mode style */
#emailLoginWrapper.signin-mode {
  background: radial-gradient(circle at 30% 30%, #ffffff, #4285f4); /* white → Google blue */
  border: 3px solid var(--accent-color); /* Gold border */
}

#emailLoginWrapper.signin-mode button {
  background-color: var(--main-color); /* dark charcoal */
  color: var(--text-inverse);          /* white */
}


/* ===== Sign-in mode ===== */
.email-auth-wrapper.signin-mode {
  background: radial-gradient(circle at 30% 30%, #ffffff, #4285f4);
  border: 3px solid var(--accent-color);
}

.email-auth-wrapper.signin-mode button {
  background-color: var(--main-color);
  color: var(--text-inverse);
}

/* ===== Sign-up mode ===== */
.email-auth-wrapper.signup-mode {
  background: radial-gradient(circle at 30% 30%, #ffffff, var(--accent-green));
  border: 3px solid var(--success);
  transform: scale(1.05); /* slightly pop out */
}

.email-auth-wrapper.signup-mode button {
  background-color: var(--accent-green);
  color: var(--text-inverse);
}

/* forgot password */
.forgot-password {
  text-align: right;
  margin: 10px 0 10px 0;
}

.forgot-password a {
  color: black;
  font-size: 0.85rem;
  text-decoration: none;
}

.forgot-password a:hover {
  color: var(--main-color);
  text-decoration: underline;
}

/*===========================*/
/*AUTH RESPONSIVE DESIGNS*/
/* Desktop: Large screens */
@media (min-width: 1200px) {
  :root {
    --header-height: 140px;
  }
  
  .header-container h1 { font-size: 2.8rem; }
  .header-container h2 { font-size: 1.7rem; }

  .auth-welcome-section { height: 18vh; }
  .fullpage-lottie-container { height: 65vh; }
}

/* Tablet: Medium screens */
@media (min-width: 768px) and (max-width: 1199px) {
  :root {
    --header-height: 120px;
  }

  .header-container h1 { font-size: 2rem; }
  .header-container h2 { font-size: 1.3rem; }

  .auth-welcome-section { height: 12vh; }  /* was 16*/
  .fullpage-lottie-container { height: 70vh; }
}

/* Mobile: Small screens */
@media (max-width: 767px) {
  :root {
    --header-height: 100px;
  }

  .header-container h1 { font-size: 1.7rem; }
  .header-container h2 { font-size: 1.1rem; }

  .auth-welcome-section { height: 12vh; }
  .fullpage-lottie-container { height: 65vh; }
}
/* AUTH RESPONSIVE TWEAKS*/
/* Tablet: 768px – 1199px */
@media (min-width: 768px) and (max-width: 1199px) {

  /* Welcome section slightly shorter */
  .auth-welcome-section {
    height: 16vh;
  }

  /* Lottie container width smaller */
  .pet-animation-container {
    width: 90%;
    max-width: 600px;
  }

  /* Google Sign-In wrapper slightly smaller */
  #googleSignInBtnWrapper {
    bottom: 7vh;
    padding: 12px;
    gap: 12px;
  }

  /* Auth messages font */
  #googleSignInBtnWrapper .auth-message,
  #googleSignInBtnWrapper .auth-legal {
    font-size: 0.9rem;
  }
}

/* Mobile: below 768px */
@media (max-width: 767px) {

  /* Welcome section shorter */
  .auth-welcome-section {
    height: 12vh;
  }

  /* Lottie container width smaller */
  .pet-animation-container {
    width: 95%;
    max-width: 500px;
    margin: 10px auto;
  }

  /* Google Sign-In wrapper smaller and closer to footer */
  #googleSignInBtnWrapper {
    bottom: 6vh;
    padding: 10px;
    gap: 10px;
  }

  /* Auth messages font smaller */
  #googleSignInBtnWrapper .auth-message,
  #googleSignInBtnWrapper .auth-legal {
    font-size: 0.85rem;
  }

  /* Bouncing ball smaller */
  #googleSignInBtnWrapper .bouncing-ball {
    width: 70px;
    height: 70px;
  }
}


/* 🔹 Media queries for auth part */
/* Tablet */
@media (max-width: 1199px) {
  #authContainer > .auth-item {
    width: 85%;
    font-size: 0.95rem;
  }
}

/* Mobile */
@media (max-width: 767px) {
  #authContainer > .auth-item {
    width: 90%;
    font-size: 0.9rem;
  }
}

/*==========================================*/
/* Mobile First (default styles for mobile) */
#emailSignupWrapper,
#emailLoginWrapper {
  position: fixed;
  top: calc(var(--header-height) + 10vh + 4px);
  right: 3px;
  width: 200px;
  height: 200px;
  padding: 2px;
}

#emailSignupWrapper input,
#emailLoginWrapper input {
  width: 50%;
  margin: 1px 0;
  padding: 1.8px 2.5px;
  font-size: 0.68rem;
}

#emailSignupWrapper button,
#emailLoginWrapper button {
  margin-top: 2px;
  padding: 2px 3px;
  width: 40%;
  font-size: 0.6rem;
}

#emailSignupWrapper .auth-legal,
#emailLoginWrapper .auth-legal {
  font-size: 0.37rem;
}

#emailSignupWrapper .auth-switch,
#emailLoginWrapper .auth-switch,
#emailSignupWrapper .auth-switch a,
#emailLoginWrapper .auth-switch a {
  font-size: 0.42rem;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  #emailSignupWrapper,
  #emailLoginWrapper {
    top: calc(var(--header-height) + 12vh + 8px);
    right: 10px;
    width: 230px;
    height: 230px;
    padding: 8px;
  }

  #emailSignupWrapper input,
  #emailLoginWrapper input {
    padding: 3px 4px;
    font-size: 0.72rem;
  }

  #emailSignupWrapper button,
  #emailLoginWrapper button {
    padding: 3px 4px;
    font-size: 0.72rem;
  }

  #emailSignupWrapper .auth-legal,
  #emailLoginWrapper .auth-legal,
  #emailSignupWrapper .auth-switch,
  #emailLoginWrapper .auth-switch,
  #emailSignupWrapper .auth-switch a,
  #emailLoginWrapper .auth-switch a {
    font-size: 0.58rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  #emailSignupWrapper,
  #emailLoginWrapper {
    top: calc(var(--header-height) + 15vh + 10px);
    right: 100px;
    width: 270px;
    height: 270px;
    padding: 8px;
  }

  #emailSignupWrapper input,
  #emailLoginWrapper input {
    padding: 2.8px 3.8px;
    font-size: 0.75rem;
  }

  #emailSignupWrapper button,
  #emailLoginWrapper button {
    padding: 3px 4px;
    font-size: 0.75rem;
  }

  #emailSignupWrapper .auth-legal,
  #emailLoginWrapper .auth-legal,
  #emailSignupWrapper .auth-switch,
  #emailLoginWrapper .auth-switch,
  #emailSignupWrapper .auth-switch a,
  #emailLoginWrapper .auth-switch a {
    font-size: 0.75rem;
  }
  
  #emailLoginWrapper .auth-switch,
  #emailSignupWrapper .auth-switch {
    font-size: 1rem;
  }
}




/* ===== DASHBOARD STYLES ===== 
FORM Styling
1️⃣ Desktop (default values are suitable large screens)
======================================================*/
/* for dashboard background when form or saved petlists reduced in size */
/* dashboard is hidden originally and when it shows it must have a space for the header on top and footer at the bottom */
#dashboard {
  background-color: var(--bg-page); /* same */
  min-height: 100vh;
  padding-bottom: 5vh;     /* same as your saved profiles */
  padding-top: var(--header-height); /* pushes all dashboard content below header */
  box-sizing: border-box;
}

#petList {
  max-width: 90%; /* suitable for desktop*/
  padding: 2rem; /* maintain internal spacing can be adjusted to 3 rem for desktop*/
  background-color: var(--card-bg); /* slightly brighter than container */
  border: 1px solid var(--border-card); /* subtle border */
  border-radius: 8px;
  margin: 2rem auto; /* centers the form inside the container */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  animation: formEntrance 0.4s ease;
}

/* ===== PET PHOTO & PHOTO PREVIEW FIX =ADDED RECENTLY==== */
#petPhoto {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid var(--accent-color);
  border-radius: 6px;
}

#petPhotoPreview {
  max-width: 100%;      /* Prevents overflow */
  height: auto;         /* Maintains aspect ratio */
  max-height: 200px;    /* Limits maximum height */
  object-fit: contain;  /* Ensures proper scaling */
  border-radius: 8px;
  margin-top: 10px;
  display: none;        /* Hidden until image loads */
}

/* Show preview when image is loaded */
#petPhotoPreview[src]:not([src="#"]) {
  display: block;
}


/* Input field enhancement */
input[type="text"],
input[type="tel"],
input[type="date"],
select,
textarea {
  border: 1px solid var(--accent-color);
  border-radius: 6px;
  padding: 10px;
  width: 100%; /* suitable for desktop*/
  font-size: 16px;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.3); /* using --secondary-color greenish tint */
  outline: none;
}

/* Subtle secondary-color highlights for microchip and emergency contact inputs */
#petList fieldset.reminders-section input[type="datetime-local"]:focus,
#petList input#microchipId:focus,
#petList input#microchipDate:focus,
#petList input#microchipVendor:focus,
#petList input#emergencyContactName:focus,
#petList input#emergencyContactPhone:focus,
#petList input#emergencyContactRelationship:focus {
    box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.3); /* var(--secondary-color) */
    border-color: var(--accent-color);
}

/* Form reminders section styling */
#petList fieldset.reminders-section {
  border: 1px solid var(--accent-color);
  padding: 1rem;
  margin-top: 1rem;
  border-radius: 8px;
  background-color: var(--bg-card);
}

#petList fieldset.reminders-section legend {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

#petList fieldset.reminders-section label {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-main);
}

#petList fieldset.reminders-section input[type="datetime-local"] {
  display: block;
  width: 100%;
  padding: 6px 10px;
  font-size: 0.9rem;
  margin-top: 4px;
  border: 1px solid var(--border-main);
  border-radius: 4px;
}

/* Dashboard Action Buttons including new profile and logout button alignement with it plus submit button */
.dashboard-actions {
  display: flex;
  justify-content: space-between;
  min-width: 160px;  /* same as Save/Cancel */
  height: 44px;      /* lock height */
  padding: 0 1.5rem;
  align-items: center;
  margin-bottom: 15px;
  margin-right: 60px; /* ← ADD THIS */
  margin-left: 60px; /* ← ADD THIS */
}


/* primary actions class controls logout, add profile, save pet profile buttons*/
.primary-action {
  background-color: var(--accent-color);      /* Gold */
  color: var(--text-main);                    /* Dark gray text */
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  border: 2px solid var(--border-button);     /* Gold border */
  transition: background 0.3s ease;
}

.primary-action:hover {
background-color: #E6C300; /* Slightly darker gold */
transform: translateY(-2px); /* Optional lift effect */
}

/* separate rule for logout button for its colour red , targeting it by its id #*/
#logoutButton.primary-action {
  background-color: var(--error);
}
#logoutButton.primary-action:hover {
  background-color: var(--darkred);
}
/* Add this new container(.form-actions class) for cancel button and submit button too
  what's happening is the container targets the class form actions for the alignement and the wrapping of the two buttons.
  the actual styles are targetting buttons by id for cancel button and class for submit button */
.form-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem; /* increase or decrease to adjust the gap*/
  margin-top: 2rem;
}

/* Update cancel button - remove margin-top */
#cancelEditBtn {
  background-color: var(--error);
  color: white;
  margin-left: 0; 
  margin-top: 0;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#cancelEditBtn:hover {
  background-color: var(--darkred);
  border: black; 
}

/* Ensure submit button stays left-aligned */
.form-actions button[type="submit"],
#cancelEditBtn,
#logoutButton {  /* ← ADD THIS FOR LOGOUT BUTTON*/
  min-width: 160px; /* keeps Save + Cancel same width */
  text-align: center;  /* centralize */
  height: 44px;       /* fixed height for both buttons for uniformity */
}

/* 2️⃣ Tablet (768px – 1199px)*/
@media (min-width: 768px) and (max-width: 1199px) {
  #petList {
    max-width: 85%;
    padding: 1.8rem 2.5rem;
  }

  #petList input,
  #petList select,
  #petList textarea {
    font-size: 0.95rem;
    border-color: var(--border-color);
  }
    #petList input:focus,
  #petList select:focus,
  #petList textarea:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 1.5px rgba(39, 174, 96, 0.3);
  }
}

/* 3️⃣ Mobile (up to 767px)*/
@media (max-width: 767px) {
  #petList {
    max-width: 98%; /* scale it down if neede*/
    padding: 1.2rem 1.5rem;
  }

  #petList input,
  #petList select,
  #petList textarea {
    font-size: 0.9rem;
  }
  #petList input:focus,
  #petList select:focus,
  #petList textarea:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 1px rgba(39, 174, 96, 0.25);
  }
}




/*================================================*/
/* Pet Cards all styles SPLIT LAYOUT */
/* added to ensure footer doesn't cover last petCard in dashboard  مهم جدآ*/
/*============================================================*/
/* these values are tablet optimized*/
.saved-profiles {
 /* padding-top: var(--header-height);  stays in sync with header 110px */
/*  padding-bottom: 5vh;  /* same as footer height */
  display: flex;          /* make it flexbox */
  align-items: center;    /* keep cards centered horizontally */
  max-width: 90%; /* or 100% if you want more flexibility */
  flex-direction: column; /* force vertical stacking */
  border:var(--border-card); /* to check it out*/
}

.saved-profiles h3 {
  margin: 0 auto 1rem auto; /* top 0, right 0, bottom 1rem, left 2rem */
  text-align: center;      /* align text to the center */
  font-size: 1.2rem;
  font-weight: bold;
}

..pet-card {
  background: var(--bg-card); /*white */
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  flex-direction: column; /* 🔁 Changed from row */
  gap: 1rem;
  margin-bottom: 10rem; /* will give more space between saved petcards 1.5rem*/
  box-shadow: 0 4px 6px rgba(0,0,0,0.08);
  border: 2px solid var(--border-card);       /* Light gray border */
}

/* Add to apply to pet header and details*/
.card-section {
  border: 1px solid var(--border-card);       /* Light gray border */
  border-radius: 8px;
  padding: 0.25rem 0.5rem;
  background: #fafafa;
}

.pet-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.pet-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}
.pet-header h4 {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--text-main); /* Dark gray text */
  margin: 0;
}
.pet-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.4;
}
.pet-details p,
.pet-details ul li {
  margin: 0;
  padding: 4px 0;
  text-align: left;
}

/* SAVED PETCARD PHOTO*/
.pet-photo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.pet-photo {
  width: 100px;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
/*SAVED PETCARD PHOTO FALLBACK WHEN PHTO UPLOADING FAILS*/
.pet-photo.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  font-size: 1.5rem;
}

/* ======= all reminders related styles ============ */
.pet-reminders {
  background: var(--bg-page); /* Light gray */
  border: 1px solid var(--border-card); /* Light gray border */
  padding: 12px 16px;
  border-radius: 6px;
  margin-top: 1rem;
  font-size: 0.9rem;
}

.reminder {
  padding-left: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.reminder-text {
  flex: 1;
  color: inherit;
  font-size: 0.9rem;
  line-height: 1.4;
}

.reminder-emoji {
  font-size: 1.2rem;
  margin-right: 6px;
}

/* Overdue Reminder - Red theme */
.reminder.overdue {
  background-color: #ffebee;
  border-left: 4px solid var(--error); /* Red */
  color: var(--error); /* Red */
  font-weight: 500;
}

/* Today Reminder - Orange theme */
.reminder.today {
  background-color: #fff3e0;
  border-left: 4px solid var(--warning); /* Yellow/Orange */
  color: var(--warning); /* Yellow/Orange */
  font-weight: 500;
}

/* Upcoming Reminder - Green theme */
.reminder.upcoming {
  background-color: #e8f5e9;
  border-left: 4px solid var(--success); /* Green */
  color: var(--success); /* Green */
  font-weight: 500;
}

/* ===== Reminder Delete Buttons ===== */
.deleteReminderButton {
  padding: 6px 10px;
  font-size: 0.85rem;
  font-weight: 500;
  border: none;
  border-radius: 4px;
  margin-left: 10px;
  cursor: pointer;
  transition: background 0.3s ease;
}

/* Overdue Button - Red */
.btn-overdue {
  background-color: var(--error); /* Red */
  color: white;
}
.btn-overdue:hover {
  background-color: #b71c1c; /* Darker red */
}

/* Today Button - Orange */
.btn-today {
  background-color: var(--warning); /* Yellow/Orange */
  color: white;
}
.btn-today:hover {
  background-color: #cf711f; /* Darker orange */
}

/* Upcoming Button - Green */
.btn-upcoming {
  background-color: var(--success); /* Green */
  color: white;
}
.btn-upcoming:hover {
  background-color: #1b5e20; /* Darker green */
}


/* ======== Pet Card Action & Buttons =========== */
.pet-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1rem;
}

.pet-actions button {
  flex: 1 1 30%;
  min-width: 100px;
  padding: 8px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Primary Actions (Edit, Details, Invite) */
.edit-btn {
  background-color: var(--accent-color); /* Gold */
  color: var(--text-main); /* Dark gray */
}

.details-btn {
  background-color: var(--accent-color); /* Gold */
  color: var(--text-main); /* Dark gray */
}

.inviteFriends-btn {
  background-color: var(--accent-color); /* Gold */
  color: var(--text-main); /* Dark gray */
}

/* Secondary Actions (QR, Export) */
.qr-btn {
  background-color: var(--bg-page); /* Light gray */
  color: var(--text-main); /* Dark gray */
  border: 2px solid var(--border-button) !important; /* ← GOLD BORDER */
}

.exportAll-btn {
  background-color: var(--bg-page); /* Light gray */
  color: var(--text-main); /* Dark gray */
  border: 2px solid var(--main-color) !important; /* ← GOLD BORDER */
}

/* Danger Action (Delete) */
button.delete-btn {
  background-color: var(--bg-card); /* White */
  color: var(--error); /* Red */
  border: 1px solid var(--error); /* Red border */
}

/* Hover States */
.edit-btn:hover,
.details-btn:hover,
.inviteFriends-btn:hover {
  background-color: #E6C300; /* Darker gold */
  transform: translateY(-1px);
}

.qr-btn:hover,
.exportAll-btn:hover {
  background-color: #E8E8E8; /* Slightly darker gray */
  transform: translateY(-1px);
}

button.delete-btn:hover {
  background-color: var(--error); /* Red */
  color: var(--text-inverse); /* White text */
  transform: translateY(-1px);
}

/* NEW HELPER FUNCTION FOR PET FIELDS */
.pet-field {
  display: flex;
  flex-direction: column;
}

.pet-field strong {
  font-weight: 600;
  color: var(--text-main); /* Dark gray */
}


/* =====QR CODE STYLES======== */
.qr-window {
  padding: 20px;
  text-align: center;
}

.qr-controls {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.qr-controls button {
  padding: 0.8rem 1.8rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

#downloadQR {
  background: var(--accent-color); /* Gold */
  color: var(--text-main); /* Dark text */
}

#downloadQR:hover {
  background: #E6C300; /* Darker gold */
  transform: translateY(-1px);
}

#printQR {
  background: var(--accent-green); /* Your new green */
  color: white;
}

#printQR:hover {
  background: #3D8B40; /* Darker green */
  transform: translateY(-1px);
}

.developer-info {
  margin-top: 20px;
  padding: 12px 15px;
  background-color: var(--bg-page); /* Light gray */
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-main); /* Dark text */
  border: 1px solid var(--border-card); /* Light border */
}

.developer-info a {
  color: var(--accent-color); /* Gold links */
  text-decoration: none;
  font-weight: 500;
}

.developer-info a:hover {
  text-decoration: underline;
  color: #E6C300; /* Darker gold */
}

/* ======LOADER SPINNER======= */
/* CSS spinner fallback */
.css-spinner-fallback {
  display: none;
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--qr-blue);
  border-radius: 50%;
  width: 35px;
  height: 35px;
  animation: spin 1s linear infinite;
  margin: 2rem auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
/*=≈========================*/
.loader-text {
  color: #2C3E50 !important; /* Your charcoal color */
  font-weight: bold;
  font-size: 18px;
  margin: 10px 0;
}

#dashboard-loader[style*="display: block"] > div {
  background: rgba(255, 255, 255, 0.95);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  min-width: 280px;
}

/* Success messages - green */
#dashboard-loader-success-saving,
#dashboard-loader-success-updating,
#dashboard-loader-success-deleting, 
#dashboard-loader-success-exporting {
  color: #28A745 !important; /* Your success green */
}

/* Error messages - red */  
#dashboard-loader-error-saving,
#dashboard-loader-error-updating,
#dashboard-loader-error-deleting,
#dashboard-loader-error-exporting {
  color: #DC3545 !important; /* Your error red */
}

/* In-progress messages - gold */
#dashboard-loader-saving,
#dashboard-loader-updating, 
#dashboard-loader-deleting,
#dashboard-loader-exporting {
  color: #FFD700 !important; /* Your gold accent */
}

/* CSS rule to ensure the Lottie animation is visible when shown*/
lottie-player[style*="display:none"] {
  display: none !important;
}

lottie-player:not([style*="display:none"]) {
  display: block !important;
}

/* =====Details Modal========== */
/* Modal Styles */
/* 👇 Add this new rule */  
body.modal-active {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100vh;
} 
.modal-overlay {
  position: fixed;
  top: 0;       /* ← FIX: Start from top edge */
  left: 0;      /* ← FIX: Start from left edge */
  width: 100vw; /* ← FIX: Full viewport width */
  height: 100vh; /* ← FIX: Full viewport height */
  padding-bottom: 2rem; /* 👈 pushes the card up inside the overlay */  
  background: rgba(0, 0, 0, 0.9); /* dark overlay */
  z-index: 9999; /* ensure it's above everything */
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate; /* 👈 Creates new stacking context */
  will-change: opacity; /* 👈 Optimizes fade performance */
  transform: translateZ(0); /* Forces hardware acceleration */
  contain: strict; /* Prevents bleed */
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: #fff;
  padding: 20px;
  padding-top: 40px; /* ⬅️ Add this or increase if needed */
  max-width: 480px; /*modified*/
  width: 90%;
  max-height: 85vh;     /* 👈 Slightly reduced */
  min-height: auto;     /* 👈 Allow shrinkage if content is short */
  overflow-y: auto;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
  position: relative;
  margin-bottom: 3rem;  /* 👈 Adds visual gap from footer */
  min-width: 320px; /* added*/
  margin: auto;
    /* 👇 ADD THESE TWO LINES FOR THE BORDER */
  border: 2px solid var(--accent-color);
  border-radius: 12px;
}

/* blur card behind spinner during loading*/
.modal-content.loading {
  backdrop-filter: blur(2px); /* 👈 New line - creates visual separation */
  pointer-events: none;
}

.modal-overlay.active .modal-content {
  transform: translateY(0);
}

.close-modal {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

.pet-details-modal {
  max-width: 400px;
  padding: 1rem;
}

.detail-photo {
  max-width: 200px;
  display: block;
  margin: 0 auto 1rem;
}

.details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.section-break {
  grid-column: 1 / -1;
  margin-top: 1rem;
  font-weight: bold;
}

/* === Modal Button Styles (including new Share) === */
.modal-actions {
  display: flex;
  justify-content: center;
  flex-direction: row;    /* Explicit row layout (default, but ensures consistency) */
  flex-wrap: nowrap;  
  gap: 0.75rem;
  margin-top: 1.5rem;
  width: 100%; /* ✅ Ensures container takes full width */
}

.modal-actions button {
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}

/* Specific Buttons */
.close-btn {
  background-color: var(--mustard, #fbc02d);
  color: black;
}
.pdf-btn {
  background-color: var(--mustard, #fbc02d);
  color: black;
}


/* ===== ERROR STATES ===== */
/* Custom notification styles (optional) */
#error-message {
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: opacity 0.3s ease;
  font-family: inherit;
  border: none;
}

#error-message.success-message {
  background: #4CAF50 !important; /* Green */
}

#error-message.error-message {
  background: #f44336 !important; /* Red */
}

/* ===== ANIMATIONS ===== */
@keyframes formEntrance {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ====== PDF Export Styles (Complete) ======= */
@media print, screen and (width: 210mm) {
  /* Root Container - Safe PDF Dimensions */
  .pdf-export-container {
    width: 190mm !important;
    height: auto !important;
    min-height: auto !important;
    padding: 5mm 10mm !important;
    margin: 0 auto !important;
    background: white !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Font & Text Baseline */
  .pdf-export-container * {
    font-family: Arial, sans-serif !important;
    font-size: 10pt !important;
    line-height: 1.35 !important;
    letter-spacing: normal !important;
    color: #333 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    display: block !important;
    contain: none !important;
    break-inside: avoid !important;
  }

  /* Adaptive Grid Layout */
  .pdf-export-container .details-grid {
    display: grid !important;
    grid-template-columns: 1fr !important; /* Single column */
    gap: 0.3rem !important;
  }

  /* Section Headers */
  .pdf-export-container .section-break {
    grid-column: 1 / -1 !important;
    margin: 0.5rem 0 0.25rem !important;
    padding-bottom: 0.25rem !important;
    border-bottom: 1px solid #eee !important;
    font-weight: bold !important;
    page-break-after: avoid !important;
  }

  /* Ensure fields render */
  .pdf-export-container .detail-row {
    display: flex !important; /* ✅ Keep flex for alignment */
    flex-wrap: wrap !important; /* Allows line breaks if needed */
    min-height: 0 !important; /* Disables flex minimum height */
    overflow: visible !important; /* Prevents clipping */
    page-break-inside: avoid !important;
    margin: 0.1rem 0 !important; /* Tighter spacing */
  }

    .pdf-export-container .detail-label {
    flex: 0 0 90px !important; /* Fixed width, won't shrink */
    color: #555 !important;
  }

    .pdf-export-container .detail-value {
    flex: 1 !important;
    min-width: 0 !important; /* Allows text compression */
  }

  /* Media Elements */
  .pdf-export-container .pet-profile-photo {
    max-width: 100px !important;
    max-height: 100px !important;
    margin: 0 auto 10px !important;
    display: block !important;
  }

  /* Hide Interactive Elements */
  .pdf-export-container button,
  .pdf-export-container [onclick] {
    display: none !important;
  }
}

@page {
  size: A4 portrait;
  margin: 10mm;
  marks: none;
}

/* Loader Styles (PDF-specific) */
.pdf-loader {
  border-top-color: #4CAF50 !important; /* Green instead of blue */
  position: fixed !important;
  z-index: 10000 !important;
}

.pdf-loader-btn {
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid #f3f3f3 !important;
  border-top: 2px solid var(--qr-blue) !important;
  border-radius: 50% !important;
  animation: spin 1s linear infinite !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
}

/* Disabled State for PDF Button */
.savePDF-btn[disabled] {
  opacity: 0.7 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ========== COMMUNITY CHAT MODAL ========== */
/*  community chat button styling*/
.communityChat-btn {
  background-color: #7B9053;
  color: white; /* or your preferred text/icon color */
  border: 2px solid #4e348c;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  animation: pulse 1.6s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(78, 52, 140, 0.4);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(78, 52, 140, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(78, 52, 140, 0);
  }
}


.community-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(44, 62, 80, 0.85); /* Using --main-color with opacity */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000; /* Above other modals */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.community-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}
.community-modal-content {
  background: var(--bg-card); /* Use white instead of main color */
  border-radius: 12px;
  border: 2px solid var(--border-main); /* Gold border */
  width: 90%;
  height: 90%; /* Fixed height instead of 70vh */
  max-height: 90vh; /* Contain everything */
  min-height: 500px; /* Prevents collapsing */
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  animation: fadeSlideIn 0.3s ease;
  overflow: hidden; /* Prevent spillout */
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* REDUCE HEADER SPACING */
.community-modal-content h1 { /* Changed from h2 to h1 per your JS  COMMUNITY FEEDBACK */
  margin: 0.25rem 0; /* Reduced from large margins */
  padding: 0; /* Remove padding */
  font-size: 1.3rem; /* Slightly smaller */
}

/* Header layout for new JS structure */
.chat-header {
  margin: 0.25rem 0; /* Reduced from 1rem */
  padding: 0.25rem 0; /* Add minimal padding */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pet-name-header {
  background: var(--text-main); /* Dark gray text */
  color: var(--text-inverse); /* White text */
  padding: 0.5rem 1rem;  /* ADDED*/
  border-radius: 6px; /* ADDED*/
  font-weight: bold;
  font-size: 1.1rem;
}

.chat-controls {
  display: flex;
  gap: 0.5rem;
}
/* FOR THE CHAT MESSAGES CONTAINER/ SCROLLABLE AREA*/
.chat-messages {
  flex: 1;
  background: #FFFFFF; /* Pure white */
  color: black;
  border: 2px solid #CCCCCC; /* Medium contrast border */
  padding: 0.5rem;
  min-height: unset; /* Let flex:1 handle height */
  max-height: 400px; /* Add maximum limit */
  margin: 0.25rem 0; /* Reduced from 1rem */
  overflow-y: auto;
  border-radius: 8px;
  font-size: 0.95rem;
  overscroll-behavior-y: contain; /* Prevent page scroll when chat scrolls */
}

/* Message states */
.chat-message.pending {
  opacity: 0.8;
  border-left-color: var(--warning);
}

.chat-message.approved {
  border-left-color: var(--success) !important;
}

.admin-message {
  background-color: rgba(44, 62, 80, 0.1); /* Light charcoal tint */
  padding: 8px;
  border-radius: 5px;
  border-left-color: var(--main-color); /* Charcoal left border */
}
/* === Scrollbar (Update these) === */
.chat-messages::-webkit-scrollbar-thumb {
  background: #d2b48c; /* Light brown */
  border-radius: 3px;
}
.dark-mode .chat-messages::-webkit-scrollbar-thumb {
  background: #555;
}
.chat-message strong {
  color: var(--accent-color); /* Gold in dark mode */
}

.chat-message small {
  display: block;
  color: var(--text-light); /* Medium gray for timestamps */
  font-size: 0.75rem;
}

#chatInput {
  resize: none;
  height: 50px;
  padding-top: 0.5rem;
  padding: 0.75rem;
  margin-top: auto; /* Push to bottom */
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid var(--border-card);
  background: var(--bg-card);
  color: var(--text-main);
  outline: none;
  margin-bottom: 0.15rem;
}
/* === Message Actions (Add these) === */
.message-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.delete-btn, .reply-btn {
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  padding: 2px;
}
.delete-btn:hover, .reply-btn:hover {
  opacity: 1;
}
.delete-btn { color: #e74c3c; } /* Error color */
.reply-btn { color: #4e348c; } /* Lavender */
.reply-context {
  font-size: 0.8em;
  color: #8e6b3f; /* Earthy brown */
  border-left: 2px solid #d2b48c; /* Light brown */
  padding-left: 8px;
  margin-top: 4px;
}

#sendChatBtn {
  background: var(--accent-color); /* Gold button */
  color: var(--text-main); /* Dark text on gold */
  font-weight: bold;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--border-button);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}
#sendChatBtn:hover {
  background: #e6c300; /* Slightly darker gold */
}
/* WHERE ONE MESSAGE PER DAY LINE*/
.chat-status {
  margin-top: 0.15rem;
  margin-bottom: 0.8rem; /* ← Reduce to: */
  margin-bottom: 0.3rem;
  font-size: 1rem; /* ← Reduce to: */
  font-size: 0.85rem;
}

.no-messages {
  text-align: center;
  color: #aaa;
  font-style: italic;
}

.close-community-chat {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.5rem;
  color: var(--main-color); /* Charcoal X */
  border: none;
  cursor: pointer;
}
.close-community-chat:hover {
  color: var(--error); /* Red on hover */
}

.community-modal-overlay {
  /* Ensure modal is focusable for keyboard users */
  &:focus-visible { outline: 2px solid var(--purple); }
}



/* === Manual Dark Mode (Add these) === */
.community-modal-content.dark-mode {
  background: #2a2a2a;
  color: var(--text-inverse);
  border-color: #444;
}
.dark-mode .chat-messages {
  background: #1e1e1e;
  border-color: #555;
}
.dark-mode .chat-message {
 border-color: #444;
  background: #2D3748; /* Dark blue-gray */
  color: white !important; /* Force white text */
}
  .dark-mode .chat-message:hover {
  background: #333; /* Darker cards */
  color: white;
}

.dark-mode #chatInput {
  background: #252525;
  color: var(--text-inverse);
  border-color: #555;
}
.dark-mode-toggle {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgba(0,0,0,0.1);
  color: var(--text-main);
  border: none;
  border-radius: 20px;
  padding: 5px 10px;
  cursor: pointer;
  z-index: 1;
}
/* High-contrast mode support */
@media (prefers-contrast: high) {
  .community-modal-content {
    border: 2px solid var(--border-main);
  }
}
@media (prefers-color-scheme: dark) {
  .community-modal-content {
    background: var(--main-color);
    color: var(--text-inverse);
  }
  #chatInput {
    background: #333;
    color: var(--text-inverse);
    border-color: #555;
  }
}

/* === Animations (Add these) === */
@keyframes messageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.dark-mode .admin-message {
  background-color: rgba(255, 215, 0, 0.1); /* Gold tint in dark mode */
  border-left-color: var(--accent-color); /* Gold left border */
}


.dark-mode .pet-name-header {
  background: var(--accent-color); /* Gold in dark mode */
  color: var(--text-main); /* Dark text on gold */
}
.dark-mode .chat-message strong {
  color: var(--accent-color); /* Gold in dark mode */
}

/* Admin controls */
.admin-controls {
  display: inline-flex;
  gap: 5px;
  margin-left: 10px;
}

.admin-controls button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-main);
}
.dark-mode .admin-controls button {
  color: var(--text-inverse);
}

/* View toggle button */
.view-toggle-btn {
  background: var(--main-color);
  color: var(--text-inverse);
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.view-toggle-btn:hover {
  background: #34495e; /* Darker charcoal */
}

.daily-limit-note {
  font-size: 0.8rem;
  color: var(--text-light);
  margin-top: 10px;
  text-align: center;
}
/* Notification badge */
.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: var(--error);
  color: var(--text-inverse);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Message status badges */
.pending-badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 10px;
  margin-top: 5px;
  color: var(--warning); /* Yellow for pending */
  color: var(--text-main);
}


.approved-badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 10px;
  margin-top: 5px;
  color: var(--success) !important; /* Green for approved */
  color: var(--text-inverse);
}

/* Keep the dark mode version separate */
.dark-mode .approved-badge {
  color: var(--success); /* Green */
}



/* Message controls */
.delete-btn { 
  color: var(--error); /* Red for delete */
}
.reply-btn { 
  color: var(--main-color); /* Charcoal for reply */
}
/* Responsive modal dimensions */
@media (min-width: 768px) {
  .community-modal-content {
    max-width: 650px;
    height: 75vh;
  }
}

@media (max-width: 480px) {
  .community-modal-content {
    max-width: 95%;
    height: 85vh;
    padding: 1rem;
  }
  
  .chat-header {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
  
  .chat-controls {
    justify-content: center;
  }
}

/* responive designs for devices*/
/* Desktop optimization */
@media (min-width: 768px) {
  .community-modal-content {
    max-width: 650px; /* Slightly wider for desktop */
    height: 75vh; /* Fixed height for desktop */
  }
}

/* Tablet optimization */
@media (min-width: 481px) and (max-width: 767px) {
  .community-modal-content {
    max-width: 90%;
    height: 80vh;
    padding: 1rem; /* check*/
  }
}

/* Mobile optimization */
@media (max-width: 480px) {
  .community-modal-content {
    max-width: 95%;
    height: 85vh;
    padding: 1rem;
  }
  
  .chat-header {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
  
  .chat-controls {
    justify-content: center;
  }
}
/* Ensure proper contrast in dark mode */
.dark-mode .chat-message small {
  color: #cccccc;
}

.dark-mode .no-messages {
  color: #999999;
}


/* ONLINE AND OFFLINE STATUS CHECK*/
.online-status {
  position: fixed;
  top: 10px;
  right: 10px;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 10000;
  opacity: 0.9;
}

.online-status.online {
  background-color: #4CAF50;
  color: white;
}

.online-status.offline {
  background-color: #f44336;
  color: white;
}

/* ===== RESPONSIVE DESIGNS============== */
/* Prevent header/footer from shrinking on phones*/
header, footer {
  padding: 1rem;
}
@media (min-width: 768px) {
  header h1 { font-size: 2.5rem; }
  footer { padding: 1.5rem; }
}


/* ===== DESKTOP RESPONSIVE DESIGN ===== */
/* Desktop (≥1024px) */
@media (min-width: 1024px) {
  .pet-card {
    flex-direction: row; /* Side-by-side layout */
    max-width: 800px;
    margin: 0 auto 2rem;
  }
  .pet-photo {
    width: 150px; /* Larger image on desktop */
  }
}

@media (max-width: 768px) {
  body {
    padding: 10px;
  }

  .form-container, .reminders-container {
    padding: 15px;
  }

  fieldset {
    padding: 15px;
  }
}

@media (max-width: 480px) {
  button {
    width: 100%;
  }

  .pet-card {
    padding: 15px;
  }

  .qr-controls {
    flex-direction: column;
  }
}
@media (min-width: 1025px) {
  .modal-content {
    transform: scale(0.85);
    transform-origin: top center;
    font-size: 0.95rem; 
    line-height: 1.3;
  }
  .details-grid {
  gap: 0.4rem;
}
}

/* ----- Desktop-Specific PDF Enhancements ----- */
@media (min-width: 768px) {
  .pdf-export-container .details-grid {
    display: grid !important;                /* Force grid layout */
    grid-template-columns: repeat(2, 1fr) !important; /* Two columns */
    gap: 0.25rem !important; /* Tighter grid spacing */
    align-items: start !important;          /* Prevent row stretching */
    padding: 5mm 10mm !important; /* Reduced from 5mm 10mm */
    margin-top: -3mm !important; /* Pull content upward */
  }
  /* Label/value alignment */
  .pdf-export-container .detail-label {
    flex: 0 0 95px !important;     /* Fixed width for alignment */
    color: #444 !important;        /* Darker for better contrast */
  }
  .pdf-export-container .section-break {
    grid-column: span 2 !important;         /* Headers span both columns */
  }
    /* Force all reminders to stay in view */
  .pdf-export-container .section-break:last-child,
  .pdf-export-container .section-break:last-child + div {
    position: relative !important;
    top: auto !important;
  }
    .pdf-export-container {
    padding: 4mm 8mm 2mm 8mm !important; /* Top, Right, Bottom, Left */
    margin-top: -3mm !important; /* Pull up further */
  }
  /* Improved typography */
  .pdf-export-container * {
    font-size: 10pt !important; /* Slightly smaller text */
    line-height: 1.3 !important;
  }
}

/* Desktop Chat Modal (≥1024px) */
@media (min-width: 1024px) {
  .community-modal-content {
    max-width: 700px; /* Wider chat on desktop */
    height: 60vh;
  }
  .details-grid {
  gap: 0.4rem;
  }
}

/* ========== Tablet Styles (Portrait & Landscape) ========== */
@media (min-width: 768px) and (max-width: 1024px) {
  .modal-content {
    max-width: 95%;
    padding: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.3;
    transform: scale(0.9);
    transform-origin: top center;
  }

  .details-grid {
    grid-template-columns: 1fr; /* Stack details vertically */
    gap: 0.4rem;
  }

  .modal-actions {
    flex-direction: column;
    align-items: center;
  }

  .detail-photo {
    max-width: 160px;
  }

  .pet-card {
    padding: 1rem;
  }
}

/* ========== Mobile Styles (≤767px) ========== */
@media (max-width: 767px) {
  .modal-content {
    padding: 1rem;
    font-size: 0.9rem;
    transform: scale(0.95);
    transform-origin: top center;
  }

  .modal-actions {
    flex-direction: column;
    gap: 0.5rem;
  }

  .detail-photo {
    max-width: 140px;
    margin: 0 auto 0.5rem;
  }

  .details-grid {
    grid-template-columns: 1fr; /* Fully stacked */
    gap: 0.75rem;
  }

  .modal-actions button {
    width: 100%;
    font-size: 0.9rem;
  }

  .pet-card {
    padding: 1rem;
    margin-bottom: 2rem;
  }
}

/* Phone (≤600px) */
@media (max-width: 600px) {
  .pet-card {
    padding: 0.75rem;
    margin-bottom: 1.5rem;
  }
  .pet-actions button {
    min-width: 100%; /* Full-width buttons */
    margin-bottom: 0.5rem;
  }
}
/* Phone forms */
@media (max-width: 600px) {
  input[type="text"],
  select,
  textarea {
    font-size: 14px; /* Larger touch targets */
    padding: 12px;
  }
  #petList {
    padding: 1rem;
    margin: 1rem auto;
  }
}
/* Phone modals */
@media (max-width: 600px) {
  .modal-content {
    width: 95vw;
    padding: 1rem;
  }
  .detail-photo {
    max-width: 120px;
  }
}
/* Mobile Chat Modal (≤600px) */
@media (max-width: 600px) {
  .community-modal-content {
    width: 95vw;
    height: 80vh; /* Fill most of the screen */
    padding: 1rem;
  }
  #chatInput {
    height: 80px; /* Larger input area for mobile */
  }
}