/* === Responsive mobile/tablet optimizations === */
@media (max-width: 1024px){
  .container, .page, .content { padding: 16px; }
}

@media (max-width: 768px){
  header, .topbar-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  nav, .topnav {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  .grid, .cards, .listings {
    grid-template-columns: 1fr !important;
  }

  form .row, form .form-grid {
    grid-template-columns: 1fr !important;
  }

  button, .btn {
    width: 100%;
  }
}

@media (max-width: 430px){
  h1 { font-size: 22px; }
  h2 { font-size: 18px; }
  p, span, label { font-size: 14px; }

  .card, .listing, .apartment {
    padding: 12px;
  }
}


/* === Compact top header on mobile (keeps same UI, just smaller) === */
@media (max-width: 430px){
  /* Make top bar compact */
  header.topbar, .topbar{
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .topbar-inner{
    gap: 8px !important;
    padding: 0 !important;
  }

  /* Brand/logo smaller */
  .brand, .logo, .site-logo{
    font-size: 16px !important;
    line-height: 1.2 !important;
  }
  .brand img, .logo img, .site-logo img{
    max-height: 22px !important;
    width: auto !important;
  }

  /* Actions row smaller (theme toggle + auth buttons) */
  .topbar-actions{
    gap: 8px !important;
  }
  .topbar-actions .btn, .topbar-actions button, .topbar-actions a.btn{
    padding: 8px 10px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
    width: auto !important; /* keep buttons inline */
  }

  /* Theme toggle smaller */
  .theme-toggle, .themeSwitch, .toggle-theme, #themeToggle{
    transform: scale(0.9);
    transform-origin: right center;
  }

  /* Navigation becomes a single-line, horizontally scrollable strip (like apps) */
  nav.topnav, .topnav{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  nav.topnav::-webkit-scrollbar, .topnav::-webkit-scrollbar{
    display: none;
  }
  .topnav a, .topnav-link{
    white-space: nowrap;
    padding: 8px 10px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
  }
}


/* === Brand/logo sizing on mobile (keep desktop identity) === */
@media (max-width: 430px){
  .brand-logo{
    max-height: 32px !important;
  }
  .brand-name{
    font-size: 16px !important;
  }
  /* nav icons slightly larger on mobile */
  .nav-icon{
    width: 22px;
    height: 22px;
  }
  .topnav-link.nav-icon-link{
    padding: 10px 12px !important;
  }
}


/* === Header layout: compact + nice ordering (mobile) === */
@media (max-width: 430px){
  /* Use grid to place: Brand (left) + Actions (right) on top row, nav icons on second row */
  .topbar-inner{
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "brand actions"
      "nav nav" !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .brand{ grid-area: brand !important; }
  .topbar-actions{ grid-area: actions !important; }
  .topnav{ grid-area: nav !important; }

  /* Make header shorter */
  header.topbar, .topbar{
    padding: 8px 12px !important;
  }

  /* Brand: show full name like desktop */
  .brand-name{
    display: inline !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: .2px;
  }
  .brand-logo{
    max-height: 30px !important;
  }

  /* Actions: compact row */
  .topbar-actions{
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  .topbar-actions .btn, .topbar-actions button, .topbar-actions a.btn{
    padding: 7px 10px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
    width: auto !important;
    white-space: nowrap;
  }

  /* Theme toggle smaller */
  #themeToggle, .theme-toggle, .toggle-theme{
    width: 36px !important;
    height: 36px !important;
  }

  /* Nav icons row centered and compact */
  .topnav{
    justify-content: center !important;
    gap: 10px !important;
    padding: 4px 0 0 !important;
  }
  .topnav-link.nav-icon-link{
    padding: 8px 10px !important;
    border-radius: 14px !important;
  }
  .nav-icon{
    width: 22px !important;
    height: 22px !important;
  }

  /* If account/profile icon exists, keep it aligned */
  .topbar-actions .account, 
  .topbar-actions .profile, 
  .topbar-actions .user, 
  .topbar-actions .user-menu,
  .topbar-actions .account-btn,
  .topbar-actions .profile-btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* === Nav icons perfectly centered on mobile === */
@media (max-width: 430px){
  .topnav{
    width: 100% !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }
}