:root {
  --bg-color: #ffffff;
  --bg-secondary-color: #f4f6f5;

  /* Primary (green-focused palette) */
  --color-primary: #32804A;
  --color-primary-dark: #27663b;
  --color-primary-light: #8dbb4e;
  --color-primary-rgb: 50, 128, 74;
  --color-accent-teal-rgb: 43, 122, 132;

  /* Neutral scale */
  --color-lightGrey: #e5e7eb;
  --color-grey: #7a7a7a;
  --color-darkGrey: #5f5f61;

  /* Semantic colors aligned with palette */
  --color-error: #d64545;
  --color-success: #32804A;

  /* Accent colors from palette */
  --color-accent-teal: #2b7a84;
  --color-accent-yellow: #e3c66b;

  --font-family-sans: 'Roboto', 'Helvetica Neue', Arial, sans-serif;

  /* Gradients adapted to palette */
  --gradient-primary: linear-gradient(135deg, #32804A 0%, #8dbb4e 100%);
  --gradient-blue: linear-gradient(135deg, #2b7a84 0%, #8dbb4e 100%);
  --gradient-hover: linear-gradient(135deg, #27663b 0%, #32804A 100%);
}


body {
  background: linear-gradient(135deg, var(--bg-color) 0%, var(--bg-secondary-color) 100%);
  min-height: 100vh;
}

/* :not(.bottom-nav) so this doesn't eat into the bottom-nav's fixed
   height budget — it only sets padding-bottom for itself, and with
   box-sizing:border-box any stray top/side padding here shrinks the
   space available for the icon+label content, which can crush the
   label down to 0 height (flex items with overflow:hidden collapse to
   their automatic minimum size first). */
body nav:not(.bottom-nav) {
  padding:1em;
}

:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);

  /* Height of the bottom-nav content area (icon + label), excluding the
     safe-area clearance. The bar's total height is
     --nav-content-height + --safe-area-bottom. Must be tall enough for the
     icon (1.375rem) + gap (3px) + label line box (~1.03rem, since label
     font-size 0.6875rem inherits the body's 1.5 line-height) + vertical
     padding (0.5rem * 2) + the nav's 1px top border, or the label gets
     crushed to 0 height by the flex auto-min-size rule. */
  --nav-content-height: 4rem;

  /* Fallback bottom inset used only inside Android WebView (see below).
     Raise it if the system gesture/navigation bar still clips the nav,
     lower it if the clearance below the icons looks too tall. */
  --wv-safe-bottom: 1.5rem;
}

/* Android WebView frequently reports env(safe-area-inset-bottom) as 0 even when
   the app is edge-to-edge (viewport-fit=cover), so the fixed bottom-nav/footer
   end up behind the system gesture/navigation bar and get partially clipped.
   The `is-android-webview` class is added by an inline script in base.html.
   max() keeps the real inset when the WebView does provide one. */
html.is-android-webview {
  --safe-area-bottom: max(env(safe-area-inset-bottom, 0px), var(--wv-safe-bottom));
  /* Tighter icon area inside the app so the bar isn't too tall once the
     gesture-bar clearance is added. Total bar = this + --safe-area-bottom.
     Kept just 0.25rem below the default to match the item's reduced
     bottom padding below — going lower crushes the label again. */
  --nav-content-height: 3.75rem;
}

/* Trim the per-item padding too, so the smaller icon area doesn't feel cramped. */
html.is-android-webview .bottom-nav-item {
  /*padding-top: 0.25rem;*/
  padding-bottom: 0.25rem;
}

/* When the top nav exists, it owns the status-bar inset and paints white behind it */
body.app-has-nav nav:not(.bottom-nav) {
  padding-top: calc(1em + var(--safe-area-top));
}

/* When there is no nav (login/register/landing), push main below the status bar */
body:not(.app-has-nav) main {
  padding-top: var(--safe-area-top);
}

/* Keep the footer clear of the Android gesture/navigation bar */
footer {
  padding-bottom: calc(1rem + var(--safe-area-bottom));
}

/* ===========================
   Modern Animated Input Fields
=========================== */
input[type="text"]:not(.colonia-search-input),
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea,
select:not(.colonia-select) {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 2px solid var(--color-lightGrey);
  color: var(--color-darkGrey);
  font-family: var(--font-family-sans);
  font-size: 1rem;
  border-radius: 12px;
  outline: none;
  padding: 0.75rem 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: relative;
  box-sizing: border-box;
}

textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  resize: vertical;
}

input[type="text"]:not(.colonia-search-input):hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
textarea:hover,
select:not(.colonia-select):hover {
  border-color: var(--color-primary-light);
  box-shadow: 0 4px 12px rgba(var(--color-accent-teal-rgb), 0.15);
  transform: translateY(-2px);
}

input[type="text"]:not(.colonia-search-input):focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:not(.colonia-select):focus {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0 0 4px rgba(var(--color-accent-teal-rgb), 0.1),
              0 8px 16px rgba(var(--color-accent-teal-rgb), 0.2),
              0 0 0 1px var(--color-primary);
  transform: translateY(-2px) scale(1.01);
  animation: inputGlow 2s ease-in-out infinite;
}

@keyframes inputGlow {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(var(--color-accent-teal-rgb), 0.1),
                0 8px 16px rgba(var(--color-accent-teal-rgb), 0.2),
                0 0 0 1px var(--color-primary);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(var(--color-accent-teal-rgb), 0.15),
                0 12px 24px rgba(var(--color-accent-teal-rgb), 0.3),
                0 0 0 1px var(--color-primary);
  }
}

.colonia-search-input {
  width: 100%;
  padding: 0.75rem 1rem;
}

/* Mobile: the 0.75rem/1rem padding above leaves inputs feeling oversized
   relative to their text on narrow screens. Tighten padding and bump the
   font up (still well above 16px so iOS Safari won't zoom on focus). */
@media (max-width: 640px) {
  input[type="text"]:not(.colonia-search-input),
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  textarea,
  select:not(.colonia-select),
  .colonia-search-input {
    padding: 0.5rem 0.75rem;
    font-size: 1.225rem;
  }
}

/* ===========================
   Modern Checkboxes with Animation
=========================== */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25em;
  height: 1.25em;
  min-width: 1.25em;
  min-height: 1.25em;
  aspect-ratio: 1 / 1;
  border: 2px solid var(--color-lightGrey);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  position: relative;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

input[type="checkbox"]:hover {
  border-color: var(--color-primary);
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(var(--color-primary-rgb), 0.2);
}

input[type="checkbox"]:checked {
  background: var(--gradient-blue);
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.4);
  animation: checkboxPulse 0.4s ease;
}

@keyframes checkboxPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 0.15em;
  left: 0.4em;
  width: 0.3em;
  height: 0.6em;
  border-right: 2.5px solid white;
  border-bottom: 2.5px solid white;
  transform: rotate(45deg);
  animation: checkmarkDraw 0.3s ease forwards;
}

@keyframes checkmarkDraw {
  from {
    opacity: 0;
    transform: scale(0) rotate(45deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(45deg);
  }
}

/* ===========================
   Modern Radio Buttons with Animation
=========================== */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25em;
  height: 1.25em;
  min-width: 1.25em;
  min-height: 1.25em;
  aspect-ratio: 1 / 1;
  border: 2px solid var(--color-lightGrey);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  cursor: pointer;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

input[type="radio"]:hover {
  border-color: var(--color-primary);
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(var(--color-primary-rgb), 0.2);
}

input[type="radio"]:checked {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.4);
  animation: radioPulse 0.4s ease;
}

@keyframes radioPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5em;
  height: 0.5em;
  background: var(--gradient-blue);
  border-radius: 50%;
  animation: radioDot 0.3s ease forwards;
}

@keyframes radioDot {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ===========================
   Modern Fancy List with Glassmorphism
=========================== */
.fancy-list {
  list-style: none;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.fancy-list li {
  display: flex;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.5);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.fancy-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background: var(--gradient-blue);
  transform: scaleY(0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fancy-list li:hover::before {
  transform: scaleY(1);
}

.fancy-list li:last-child {
  border-bottom: none;
}

.fancy-list li:hover {
  background: rgba(var(--color-accent-teal-rgb), 0.05);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(var(--color-accent-teal-rgb), 0.1);
}

.fancy-list li:active {
  background: rgba(var(--color-accent-teal-rgb), 0.1);
  transform: translateX(2px);
}

.fancy-list .icon {
  font-size: 1.75rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-right: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 2px 4px rgba(var(--color-accent-teal-rgb), 0.2));
}

.fancy-list .icon i {
  background: var(--gradient-blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fancy-list .content {
  flex: 1;
}

.fancy-list h4 {
  margin: 0;
  background: var(--gradient-blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
  font-size: 1.25rem;
}

.fancy-list p {
  margin: 0.25rem 0 0;
  color: var(--color-grey);
  font-size: 0.95rem;
}

.fancy-list .action {
  color: var(--color-lightGrey);
  font-size: 1.25rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
}

.fancy-list .action i {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fancy-list li:hover .icon {
  transform: rotate(5deg) scale(1.15);
  filter: drop-shadow(0 4px 8px rgba(var(--color-accent-teal-rgb), 0.3));
}

.fancy-list li:hover .icon i {
  animation: iconPulse 0.6s ease-in-out;
}

@keyframes iconPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.fancy-list li:hover .action {
  color: var(--color-primary);
}

.fancy-list li:hover .action i {
  transform: translateX(6px);
  color: var(--color-primary);
}

/* Alert variant: red/alert styling for report item */
.fancy-list li.fancy-list-item-alert::before {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}
.fancy-list li.fancy-list-item-alert:hover {
  background: rgba(220, 38, 38, 0.05);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.1);
}
.fancy-list li.fancy-list-item-alert .icon,
.fancy-list li.fancy-list-item-alert .icon i {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 4px rgba(220, 38, 38, 0.2));
}
.fancy-list li.fancy-list-item-alert h4 {
  color: #b91c1c;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.fancy-list li.fancy-list-item-alert:hover .icon {
  filter: drop-shadow(0 4px 8px rgba(220, 38, 38, 0.3));
}
.fancy-list li.fancy-list-item-alert:hover .action,
.fancy-list li.fancy-list-item-alert:hover .action i {
  color: #b91c1c;
}

/* ===========================
   Bottom Navigation Bar
=========================== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-lightGrey);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
  padding-bottom: var(--safe-area-bottom);
  z-index: 20;
  height: calc(var(--nav-content-height) + var(--safe-area-bottom));
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 3px;
  padding: 0.5rem 0.25rem;
  color: var(--color-grey);
  font-size: 0.6875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.18s ease, background-color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  min-width: 0;
}

.bottom-nav-item i {
  font-size: 1.375rem;
  line-height: 1;
  transition: transform 0.18s ease;
}

.bottom-nav-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.bottom-nav-item:hover {
  color: var(--color-primary);
  background-color: rgba(50, 128, 74, 0.06);
}

.bottom-nav-item.active {
  color: var(--color-primary);
  font-weight: 600;
}

.bottom-nav-item.active i {
  transform: translateY(-2px);
  filter: drop-shadow(0 2px 4px rgba(50, 128, 74, 0.3));
}

/* Space for fixed bottom nav on mobile */
.pb-nav {
  padding-bottom: calc(var(--nav-content-height) + var(--safe-area-bottom));
}

@media (min-width: 768px) {
  .pb-nav {
    padding-bottom: 0;
  }
}