/*==========================================================
  MEMBER PROFILE MODULE
==========================================================*/

#member-profile-page{
    padding:20px;
    min-width:0;
    box-sizing:border-box;
}

/*==========================================================
  TAB BAR
==========================================================*/

#member-profile-tabs{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.tab-btn5{

    padding:10px 20px;

    border:none;

    border-radius:8px;

    background:#f3f4f6;

    color:#374151;

    cursor:pointer;

    font-weight:600;

    transition:.25s;

}

.tab-btn5:hover{

    background:#e5e7eb;

}

.tab-btn5.active{

    background:#0f766e;

    color:#fff;

}

/*==========================================================
  TAB CONTENT
==========================================================*/

.tab-content5{

    display:none;

}

.tab-content5.active{

    display:block;

}

/*==========================================================
  PANEL TITLES
==========================================================*/

#member-profile-page h2{

    margin-bottom:20px;

    color:#1f2937;

    font-size:1.2rem;

}

/*==========================================================
  FORM GRID
==========================================================*/

#member-profile-page .form-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));

    gap:20px;

}

/*==========================================================
  LABELS
==========================================================*/

#member-profile-page label{

    display:block;

    margin-bottom:6px;

    font-weight:600;

    color:#374151;

}

/*==========================================================
  INPUTS
==========================================================*/

#member-profile-page input,

#member-profile-page select,

#member-profile-page textarea{

    width:100%;

    padding:10px 12px;

    border:1px solid #d1d5db;

    border-radius:8px;

    font-size:14px;

    background:#fff;

    transition:.2s;

    box-sizing:border-box;

}

#member-profile-page input:focus,

#member-profile-page select:focus,

#member-profile-page textarea:focus{

    outline:none;

    border-color:#0f766e;

    box-shadow:0 0 0 3px rgba(15,118,110,.15);

}

/*==========================================================
  READ ONLY FIELDS
==========================================================*/

#member-profile-page input:disabled{

    background:#f3f4f6;

    color:#6b7280;

    cursor:not-allowed;

}

/*==========================================================
  CHECKBOX SECTION
==========================================================*/

.profile-options{

    display:flex;

    flex-wrap:wrap;

    gap:30px;

    margin-top:20px;

}

.profile-options label{

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:500;

    cursor:pointer;

}

.profile-options input{

    width:auto;

}

/* Keep action buttons comfortably tappable and aligned on all screen sizes. */
.profile-actions{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:20px;

}

/*==========================================================
  SAVE BUTTON
==========================================================*/

#save-profile{

    min-width:180px;

    padding:12px 20px;

    font-weight:600;

}

/*==========================================================
  HORIZONTAL RULE
==========================================================*/

#member-profile-page hr{

    border:none;

    border-top:1px solid #e5e7eb;

    margin:30px 0;

}

/*==========================================================
  DEPENDENTS TAB
==========================================================*/

#profile-dependents-tab{

    min-height:250px;

}

#profile-dependents-tab .table{

    margin-top:15px;

}

/* The contacts table has five columns, so preserve each column rather than
   squeezing its contents into an unreadable mobile layout. */
#dependents-container{

    max-width:100%;

    overflow-x:auto;

    -webkit-overflow-scrolling:touch;

}

#dependents-container .table{

    min-width:620px;

}

/*==========================================================
  SECURITY TAB
==========================================================*/

#profile-security-tab{

    min-height:250px;

}

/*==========================================================
  INFO CARDS (Future)
==========================================================*/

.profile-card{

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:10px;

    padding:20px;

    margin-bottom:20px;

}

/*==========================================================
  RESPONSIVE
==========================================================*/

@media(max-width:768px){

    #member-profile-page{

        padding:12px;

    }

    #member-profile-page h1{

        font-size:1.45rem;

        line-height:1.25;

        overflow-wrap:anywhere;

    }

    #member-profile-tabs{

        flex-direction:column;

    }

    .tab-btn5{

        width:100%;

        min-height:44px;

        text-align:left;

    }

    .profile-card{

        padding:14px;

    }

    .profile-card-header p{

        overflow-wrap:anywhere;

    }

    #member-profile-page .form-grid{

        grid-template-columns:1fr;

        gap:14px;

    }

    .profile-options{

        flex-direction:column;

        gap:12px;

    }

    #save-profile{

        width:100%;

    }

    .profile-actions{

        margin-top:16px;

    }

    #profile-dependents-tab .profile-actions button{

        width:100%;

    }

    #member-profile-page input,
    #member-profile-page select,
    #member-profile-page textarea{

        min-height:44px;

        font-size:16px;

    }

    .profile-options input{

        min-height:auto;

    }

}

@media(max-width:400px){

    #member-profile-page{

        padding:8px;

    }

    .profile-card{

        padding:12px;

    }

}