@media (max-width: 1200px) {
    /* CSS rules for desktops */
main{
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
#sidebar{
    background-color: #1F2E31;
    display: none;
}
nav{
    width: 100%;
    height: 8vh;
    background-color: #1F2E31;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    align-items: center;
    padding: 0px 20px;
}
.menuSidebarBox{
    height: calc(100vh - 70px);
    background-color: transparent;
    padding: 0px;
}
}

@media (max-width: 1024px) {
    /* CSS rules for landscape tablets */
    .perf_RecentBox{
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 20px;
}
}

@media (max-width: 768px) {
    /* CSS rules for tablets and large phones*/
.tabsSecBox{
    width: 100%;
    height: auto;
    background-color: transparent;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    gap: 10px;
    margin-bottom: 1.5rem;
}
    .perf_RecentBox{
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns:  1fr;
    grid-template-rows: 1fr;
    gap: 20px;
}

.VisitTabsBox{
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 15px;
}

}

@media (max-width: 600px) {
    /* CSS rules for phones */


    nav button{
    width: 35px;
    height: 35px;
    border-radius: 50px;
    background-color: #6CB049;
    border: 0px;
    color: #fff;
}

    /* CSS rules for phones */
   .welcomTab{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
.WelcomSecA h2{
    font-size: 18px;
    font-weight: bold;
}
.WelcomSecA p{
    font-size: 14px;
}
.WelcomSecB{
    display: grid;
    align-items: center;
    justify-content: start;
}

.tabsSecBox{
    width: 100%;
    height: auto;
    background-color: transparent;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 10px;
    margin-bottom: 1.5rem;
}





/* vists grids */

.table-responsive{
    display: none;
}
    .visits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    padding: 0px;
}

.visit-card {
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.visit-card h4 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: #333;
}

.visit-card p {
    margin: 5px 0;
    font-size: 0.9rem;
    color: #555;
}

.status {
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 0.8rem;
    color: white;
}

.status.pending { background-color: #E2701D; }
.status.completed { background-color: #088C4A; }
.status.progress { background-color: #1993E1; }

.actions {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.visits-grid .btn {
    padding: 6px 12px;
    font-size: 0.8rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.btn.view { background-color: #6CB049; color: #fff; }
.btn.delete { background-color: #EF4444; color: #fff; }
.btn.checkin { background-color: #6CB049; color: #fff; }
.btn.checkout { background-color: #EF4444; color: #fff; }
.btn.rate { background-color: #F59E0B; color: #fff; }
.btn.disabled { background-color: #999; color: #fff; cursor: not-allowed; }




#system_main{
    background-color: transparent;
    padding: 0.8rem;
    overflow: auto;
    height: 84vh;
}


.addClientSectionBox{
    width: 100%;
    height: auto;
    background-color: transparent;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
}

.addUserSectionBox{
    width: 100%;
    height: 500px;
    background-color: transparent;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
}










.clients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    padding: 0px;
}

.client-card {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease;
}

.client-card:hover {
    transform: translateY(-3px);
}

.client-card h4 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: #333;
}

.client-card p {
    margin: 4px 0;
    font-size: 0.9rem;
    color: #555;
}

.card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.card-actions form,
.card-actions a {
    flex: 1;
}

.card-actions .btn {
    width: 100%;
    text-align: center;
    padding: 6px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    color: white;
}

.card-actions .btn.view { background-color: #6CB049; }
.card-actions .btn.edit { background-color: #367FA9; }
.card-actions .btn.delete { background-color: #EF4444; }









.caregivers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    padding: 0px;
}

.caregiver-card {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease;
}

.caregiver-card:hover {
    transform: translateY(-3px);
}

.caregiver-card h4 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: #333;
}

.caregiver-card p {
    margin: 4px 0;
    font-size: 0.9rem;
    color: #555;
}

.status {
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 0.8rem;
    color: white;
}

.status.active { background-color: #6CB049; }

.card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.card-actions .btn {
    flex: 1;
    text-align: center;
    padding: 6px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    color: white;
}

.card-actions .btn.schedule { background-color: #6CB049; }
.card-actions .btn.view { background-color: #1F2E31; }






.caregiver-visits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    padding: 0px;
}

.visit-card {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease;
}

.visit-card:hover {
    transform: translateY(-3px);
}

.visit-card h4 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: #333;
}

.visit-card p {
    margin: 4px 0;
    font-size: 0.9rem;
    color: #555;
}

.status {
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 0.8rem;
    color: white;
}

.status.pending { background-color: #E2701D; }
.status.completed { background-color: #088C4A; }
.status.progress { background-color: #1993E1; }

.card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.card-actions .btn {
    flex: 1;
    text-align: center;
    padding: 6px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    color: white;
}

.card-actions .btn.view { background-color: #6CB049; }










.visits-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    padding: 0px;
}

.visit-card {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
}

.visit-card:hover {
    transform: translateY(-3px);
}

.visit-card h4 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: #333;
}

.visit-card p {
    margin: 4px 0;
    font-size: 0.9rem;
    color: #555;
}

/* Status badges */
.status {
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 0.8rem;
    color: white;
}
.status.pending { background-color: #E2701D; }
.status.completed { background-color: #088C4A; }
.status.progress { background-color: #1993E1; }

/* Buttons */
.card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.buttons {
  flex-direction: column; /* Stack buttons vertically */
    align-items: stretch;   /* Make buttons full width */
    gap: 15px;
}


.card-actions .btn {
    flex: 1;
    text-align: center;
    padding: 6px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    color: white;
}

.card-actions .btn.view { background-color: #6CB049; }
.card-actions .btn.start { background-color: #6CB049; }
.card-actions .btn.rate { background-color: #F59E0B; }
.card-actions .btn.outline {
    background-color: white;
    color: #6CB049;
    border: 1px solid #6CB049;
}













.ClientVisitStatistics .tabsSecBox{
    width: 100%;
    height: auto;
    background-color: transparent;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 10px;
    margin-bottom: 0rem;
}
.clientDetailsBox{
  display: grid;
  grid-template-columns:1fr;
  grid-template-rows: 1fr;
  gap: 10px;
}



.tabsSecBoxview_caregiver{
    width: 100%;
    height: auto;
    background-color: transparent;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 10px;
    margin-bottom: 0rem;
}


/* PageFooterBox */
.PageFooterBox{
  width: 100%;
  height: 8vh;
  background-color: #1F2E31;
  position: fixed;
  left: 0px;
  bottom: 0px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: center;
  color: #6CB049;
}


main{
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

}


@media (max-width: 380px) {
    /* CSS rules for phones */
.VisitTabsBox{
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 15px;
}

.VisitTabsBoxCaregiver{
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 15px;
  margin-top: 15px;
}

}