/* ===================================================
   FILTER BAR LAYOUT
=================================================== */

.filter-bar{
  background:#fff;
  padding:12px;
  border-radius:12px;
  display:flex;
  gap:12px;
  align-items:center;
}

/* LEFT FILTER GROUP */
.filter-bar > div:first-child{
  display:flex;
  gap:8px;
  flex-grow:1;
  flex-wrap:nowrap;
}

/* RIGHT SAVE BUTTON */
.filter-bar > div:last-child{
  margin-left:auto;
}

/* ===================================================
   MOBILE INLINE VIEW (NO STACK)
=================================================== */

@media (max-width: 768px){

  .filter-bar{
    flex-direction:row; /* KEEP SINGLE LINE */
  }

  .filter-bar input{
    min-width:110px;
    max-width:160px;
  }

  #searchUsername{
    flex-grow:1;
    width: 80px;
  }

  #filterDate{
    max-width:auto;
  }

  .filter-bar button{
    white-space:nowrap;
  }

}

/* EXTRA SMALL PHONES */

@media (max-width: 480px){

  .filter-bar input{
    min-width:80px;
  }

  #filterDate{
    max-width:80px;
  }

}
/* ================================
   MOBILE INLINE FILTER BAR FIX
================================ */

@media (max-width: 576px){

  .filter-bar{
    gap:6px;
    padding:8px;
  }

  /* LEFT GROUP */
  .filter-bar > div:first-child{
    flex-grow:1;
  }

  #searchUsername{
    flex:1;
    min-width:80px;
  }

  #filterDate{
    min-width:115px;
  }

  /* Buttons tighter */
  .filter-bar button{
    padding:4px 8px;
    font-size:0.75rem;
  }

  /* Save button stays compact */
  .filter-bar .btn-danger{
    white-space:nowrap;
  }
}

/* =====================================
   ULTRA SMALL MOBILE (320px FIX)
===================================== */

@media (max-width: 360px){

  .filter-bar{
    gap:4px;
    padding:6px;
  }

  /* LEFT GROUP stays compact */
  .filter-bar > div:first-child{
    flex:1;
    min-width:0;
  }

  #searchUsername{
    flex:1;
    min-width:40px;
  }

  #filterDate{
    max-width:40px;
  }

  /* Smaller buttons */
  .filter-bar button{
    padding:3px 6px;
    font-size:0.7rem;
  }

  /* Save button super compact */
  .filter-bar .btn-danger{
    padding:4px 7px;
  }

}