:root {
  /* Base / Neutral */
  -bg: #fff4ec;           /* soft warm cream background */
  -card: #ffffff;          /* white cards */
  -muted: #6b5e4b;         /* muted brown for text */
  -text: #f6ebdd;         /* dark brown for headings */
  -text2: #4b3b2a;        /* darker brown for body text */

  /* Primary Accent */
  -accent: #a9734b;        /* warm brown for main buttons, borders */
  -accent-light: #d4a077;  /* lighter brown for gradients / hover states */

  /* Pink Highlights */
  -pink: #ff8b94;           /* soft pink for badges, secondary CTAs */
  -pink-light: #ffc4c8;     /* lighter pink for hover / subtle backgrounds */

  /* Gradients */
  -glow1: linear-gradient(90deg, #ff9c6b, #ffc4a3);   /* peach gradient */
  -glow2: linear-gradient(90deg, #ff8b94, #ffc4c8);   /* pink gradient for buttons/badges */

  /* Modal & Sidebar */
  -modal-bg: #fff;             /* modal card background */
  -modal-sidebar-bg: linear-gradient(135deg, #fff4ec, #ffd9cc); /* modal sidebar gradient */
  -modal-input-border: #ffd9cc; 
  -modal-input-bg: #fff7f5; 
  -modal-input-focus-bg: #fff0f2;
  -modal-close-btn: #6b5e4b;
  -modal-scrollbar-track: #ffe6e9;
  -modal-scrollbar-thumb: #ff8b94;

  /* Buttons */
  -btn-save-bg: #ff8b94;
  -btn-save-hover-bg: #ffc4c8;
  -btn-cancel-bg: #ffd9cc;
  -btn-cancel-hover-bg: #ffc4b0;
  -btn-cancel-color: #a9734b;

  /* Tab Menu */
  -tab-menu-bg: #ffe6e9;
  -tab-menu-active-bg: #ff8b94;
  -tab-menu-active-color: #fff;
  -tab-menu-color: #6b5e4b;

  /* Photo Placeholder */
  -photo-placeholder-bg: #fff0f2;
  -photo-placeholder-border: #ffc4c8;
  -photo-placeholder-hover-bg: #ffc4c8;
  -photo-placeholder-hover-border: #ff8b94;
  -photo-placeholder-hover-color: #ff8b94;

  /* Shadows */
  -shadow-card: rgba(0,0,0,0.08);
  -shadow-card-hover: rgba(0,0,0,0.15);
  -shadow-btn-report: rgba(168,124,95,0.4);
  -shadow-btn-report-hover: rgba(168,124,95,0.5);
  -shadow-btn-details: rgba(168,124,95,0.3);
  -shadow-btn-details-hover: rgba(168,124,95,0.4);
  -shadow-tab-active: rgba(255,140,148,0.3);
  -shadow-modal: rgba(0,0,0,0.2);
}


html, body {
  height: 100%;
  overscroll-behavior: none;  
  -ms-scroll-chaining: none;   
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Segoe UI', sans-serif;
  /* old: background: var(--glow2); */
/*  background: linear-gradient(135deg, #fff8f5, #fff9f2); BACKGROUND COLOR TO SA HOME */
  background-attachment: fixed;
  background-size: cover;  
  position: relative;
  z-index: 0;
  min-height: 100vh;   
  display: flex;
  flex-direction: column;  
  overflow-x: hidden;   
  color: var(--muted);
}


body::before {
  content: "";
  background: url("../../img/background_paws.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  opacity: 0.08;
  position: fixed;         
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.sidebar-footer {
  margin-top: 10px;
  padding: 12px 1rem 16px;
}
.sidebar-footer .d-flex { gap: 8px; }
.sidebar-footer span { font-size: 0.9rem; color: var(--muted); }

/* NAV LINKS — no underline ever */
.main-header .nav-links .nav-link,
.main-header .nav-links .nav-link:link,
.main-header .nav-links .nav-link:visited,
.main-header .nav-links .nav-link:hover,
.main-header .nav-links .nav-link:active,
.main-header .nav-links .nav-link:focus,
.main-header .nav-links .nav-link:focus-visible {
  text-decoration: none !important;
  outline: none;
}

/* Base + pastel hover/active (your pill) */
.main-header .nav-links .nav-link {
  color: rgb(255, 255, 255);
  font-weight: 500;
  transition: all .25s ease;
  font-size: 16px;
  padding: 8px 16px;
  border-radius: 18px;
}

.main-header .nav-links .nav-link:hover,
.main-header .nav-links .nav-link.active {
  background-color: #f4e4d0;
  box-shadow: 0 2px 8px rgba(92,59,34,.20);
  transform: translateY(-2px);
  color: var(--accent) !important;
}


/* HOME */
.main-header {
  margin-top: -10px;    
  padding-top: 4px;        
  padding-bottom: 4px;
}

/* Footer Base */
.cloud-divider svg {
  display: block;
  width: 100%;  /* hug sa full container width */
  height: 80px; /* adjust height */
}

.cloud-divider svg path {
  filter: drop-shadow(0 -4px 4px rgba(0,0,0,0.2));
}



.cloud-divider-bottom {
  transform: rotate(180deg);
}

/* Footer */
.site-footer {
  background: var(--pink-light)!important; /* soft pink/cream background */
  color: #6b5e4b;      /* warm brown text */
  padding: 20px 20px 20px; /* mas compact padding */
  font-family: 'Poppins', sans-serif;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px; /* bahagyang mas compact gap */
  max-width: 1200px;
  margin: 0 auto;
}

.footer-section h4 {
  font-size: 16px;
  margin-bottom: 12px;
  color: var(--accent);
  font-weight: 600;
}

.footer-section p,
.footer-section li a {
  font-size: 14px;
  line-height: 1.4; /* mas compact line height */
  color: #6b5e4b;
  text-decoration: none;
}


.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li {
  margin-bottom: 8px; /* mas compact */
}

.footer-logo {
  width: 120px;
  margin-bottom: 10px; /* mas maliit margin */
}

/* Contact */
.footer-contact i {
  margin-right: 6px;
  color: #a9734b;
}

.footer-contact p {
  font-size: 14px;
  margin: 4px 0; /* mas compact */
}

/* Social Icons */
.social-icons {
  margin-top: 8px; /* mas compact */
}

.social-icons a {
  margin-right: 10px;
  display: inline-block;
  transition: transform 0.3s;
  color: var(--muted);
}

.social-icons a:hover {
  transform: scale(1.2);
  color: var(--pink-light);
}

/* Footer Links & Services */
.footer-links ul,
.footer-services ul {
  list-style: none;
  padding: 0;
}

.footer-links ul li,
.footer-services ul li {
  margin-bottom: 6px; /* mas compact */
}

.footer-links ul li a,
.footer-services ul li a {
  text-decoration: none;
  color: var(--muted);
  font-size: 14px;
  transition: color 0.3s;
}

.footer-links ul li a:hover,
.footer-services ul li a:hover {
  color: var(--pink); /* pink hover */
}

/* Footer Bottom */
.footer-bottom {
  text-align: center;
  margin-top: 5px; /* mas compact */
  border-top: 1px solid var(--accent); /* mas manipis */
  padding-top: 10px; /* mas maliit */
  font-size: 13px;
  color: var(--accent-light);
  margin-bottom: -20px;
}

/* Responsive */
@media screen and (max-width: 900px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-section {
    min-width: 100%;
    margin-bottom: 15px; /* mas compact */
  }

  .social-icons a {
    margin-right: 12px; /* mas compact */
  }
}