/* Resident Portal — additional styles
   Most styling comes from ../assets/css/styles.css and Tailwind utilities.
   This file is for portal-specific tweaks. */

/* Center dashboard content */
#dashboard-content section:first-of-type { /* welcome hero */
    margin-left: auto;
    margin-right: auto;
}

/* Constrain quick action cards so they don't stretch unreasonably wide on desktop */
#dashboard-content section.grid {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
#dashboard-content section.grid a {
    padding: 1.25rem 1rem;
}

/* Payment status section — narrower and centered */
#payment-status {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* Payment status cards — tighter and narrower */
#payments-list .bg-white.rounded-2xl {
    max-width: 640px;
    padding: 1.25rem 1.25rem;
}
#payments-list .font-headline.text-2xl {
    font-size: 1.5rem;
}

/* Comment cards form card — narrower */
#comment-cards-page main .lg\:col-span-2.bg-white {
    padding: 1.25rem 1.25rem;
}

/* Make sure login page cards take full mobile width but constrain on desktop */
#login-card,
#request-card,
#sent-card,
#update-card,
#updated-card {
  animation: fade-in 0.3s ease-out;
}

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

/* Form input focus ring uses the gold/secondary theme consistently */
input:focus,
textarea:focus,
select:focus {
  outline: none;
}

/* Disable browser autofill yellow background */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}

/* Make mobile menu icon button tap-target larger on touch */
@media (max-width: 640px) {
  button[id="mobile-menu-btn"] {
    width: 44px;
    height: 44px;
  }
}